javascript - 2 つの選択ボックスを同期する

Question

2 つの選択ボックスがあります。

<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>

1 つのボックスが変更された場合、もう 1 つのボックスは対応するインデックスに変更する必要があります (つまり、「郡」でディクシーが選択されている場合、「サイト」でフローラホームが選択されている必要があります)。jQuery を使用した私の試みは以下のとおりですが、うまくいかないようです。

$('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);
});

何か案は？