更改选择的选项 <select> ＃2根据选择的选项<select> ＃1

Question

我有的：

我有两个选择元素。 <select> ＃1放在<table>之前，而<select> ＃2放在下面。 除类名外，每个元素的内容和功能都相同。

我需要的：

1. 每当从<select> ＃1中<select>一个选项时，我都需要从<select> ＃2中<select>相同的选项。
2. 反之亦然。

我的代码：

注意：以下代码反之亦然。

HTML：

<select class="togglebuildprojecturn_top togglebuildprojecturn">
    <option value="allbuildsprojects">All</option>
    <option value="prsm-spe-00058">prsm-spe-00058</option>
    <option value="buab-tes-00058">buab-tes-00058</option><option value="buab-exs-00058">buab-exs-00058</option>
    <option value="nonspecific">Build / Project non-specific</option>
</select>

<!--some table here-->

<select class="togglebuildprojecturn_bottom togglebuildprojecturn">
    <option value="allbuildsprojects">All</option>
    <option value="prsm-spe-00058">prsm-spe-00058</option><option value="buab-tes-00058">buab-tes-00058</option>
    <option value="buab-exs-00058">buab-exs-00058</option>                                              <option value="nonspecific">Build / Project non-specific</option>
</select>

jQuery的：

$('.togglebuildprojecturn_top').on('change', function() {

    //First attempt that I expected to work...
    var selectedbuildprojecturn = $(this).val();
    var togglematch = ".togglebuildprojecturn_bottom[value='" + selectedbuildprojecturn +"']"
    alert(togglematch); //Just testing here (I know I should be using console logs :-)
    $(togglematch).attr('selected', true);

    //Testing for targeting without selector as variable...
    $(".togglebuildprojecturn_bottom[value='prsm-spe-00058']").attr('selected', true);

});

$('.togglebuildprojecturn_bottom').on('change', function() {

    //First attempt that I expected to work...
    var selectedbuildprojecturn = $(this).val();
    var togglematch = ".togglebuildprojecturn_top[value='" + selectedbuildprojecturn +"']"
    alert(togglematch); //Just testing here (I know I should be using console logs :-)
    $(togglematch).attr('selected', true);

});

的jsfiddle：

为了您的方便： http : //jsfiddle.net/clarusdignus/rtY75/3/

我的问题：

为什么没有选择必要的选项？

Answer 1

通过使用这些元素上的class并将这两个元素上的val()设置为当前选定的值，可以大大简化代码。

$('.togglebuildprojecturn').change(function() {
    $('.togglebuildprojecturn').val($(this).val());
});

小提琴的例子