JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<form action="#">
<div>
<select id="sel1">
<option value="">Select a Value</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</div>
<div><label for="chksame">check to make same</label><input type="checkbox" id="chksame"></div>
<div>
<select id="sel2">
<option value="">Does not change display</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</div>
</form>
CSS
/* demo styles */
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
fieldset { border:0; }
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }
.wrap span.ui-selectmenu-item-header,
.wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; }
JavaScript
$(function() {
$('select').selectmenu({
style: 'popup'
});
$('#chksame').click(function() {
if ($(this).is(':checked')) {
var selectedValue = $('#sel1').val();
$('#sel2').val(selectedValue);
// $('#sel2-button span').text($("#sel2 option[value='" + selectedValue +"']").text());
$('#sel2').selectmenu("value", selectedValue);
}
});
});