javascript - Synchronize 2 Select Boxes -

i have 2 select boxes:

<select name="county" id="countyselect">  <option value="dixie">dixie</option>  <option value="hernando">hernando</option>  <option value="holmes">holmes</option>  <option value="jackson">jackson</option>  <option value="liberty">liberty</option>  <option value="putnam">putnam</option> </select> <select name="site" id="siteselect">  <option value="florahome">florahome</option>  <option value="green swamp">green swamp</option>  <option value="ne jackson county">ne jackson county</option>  <option value="n holmes county">n holmes county</option>  <option value="s liberty county">s liberty county</option>  <option value="suwannee">suwannee</option> </select> 

when 1 box changed, other needs change corresponding index (i.e. if dixie selected in "county", florahome should selected in "site"). attempt using jquery below not seem work.

$('select#countyselect').change(function() {     var countyselector = $('select#countyselect').attr("selectedindex");      $('select#siteselect').attr('selectedindex', countyselector); }); $('select#siteselect').change(function() {     var siteselector = $('select#siteselect').attr("selectedindex");     $('select#countyselect').attr('selectedindex', siteselector); }); 

any ideas?

you want prop, not attr. like:

function matchup(selected, toselect) {   var idx = selected.prop('selectedindex');   toselect.prop('selectedindex', idx); }   $('#countyselect').change(   function() {     matchup($('#countyselect'), $('#siteselect'));   } );  $('#siteselect').change(   function() {     matchup($('#siteselect'), $('#countyselect'));   } ); 

in action here: http://codepen.io/paulroub/pen/phmaj