1

我有两个选择元素，选项数量相同，这些选项的值相同，但文本不同（翻译的）。

如何将选择从一个复制到另一个？

从用户的角度来看，如果有人会在英文选择中选择“red” （值=1）和“brown” （值=5），我希望出现“rubrum” （值=1）和“rufum” （值=5）在拉丁语中选择。

对于<input>标签，这有效：

$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.val( $(this).val() );

可悲的是，这省略了<select>标签。

我找到了很多复制项目的方法，但找不到复制实际选择的方法。

在这里小提琴：http: //jsfiddle.net/e53aJ/8/

编辑：如果可能的话，我希望它同时适用于单选和多选。我知道起初我没有在我的小提琴中反映这一点，对不起。

4

3 回答 3

3

我在那里看到了您的 html 标记，您提供的所有option值都1应按如下顺序排列：

html:

    <div class=".common-identifier">
        <select name="english" class=".common-identifier">
            <option value=1>red</option>
            <option value=2>green</option>
            <option value=3>yellow</option>
            <option value=4>blue</option>
            <option value=5>brown</option>
        </select>
        <select name="latin" class=".common-identifier">
            <option value=1>rubeum</option>
            <option value=2>viride</option>
            <option value=3>flavus</option>
            <option value=4>caeruleo</option>
            <option value=5>brunneis</option>
        </select>
    </div>

jQuery：

$('select[name="english"]').on('change', function () {
   $('select[name="latin"]').val(this.value);
});

小提琴

于 2013-06-21T09:58:32.537 回答
1

<select>元素有一个属性selectedIndex，指示选择了它们的哪些选项。

如果你得到selectedIndex一个<select>，然后将selectedIndex另一个设置<select>为那个，你应该得到你正在寻找的结果。

但是，如果您<select>接受多项选择（正如您的问题所暗示的那样），那么它会更令人厌烦。您必须遍历<option>元素并检查每个元素以查看其selected属性是否为真。

（这就是 jQuery 流行的原因：JavaScript DOM 接口经常很烂。）

于 2013-06-21T09:53:13.367 回答
0 
$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.attr('selectedIndex', $(this).attr('selectedIndex'));
于 2013-06-21T09:54:01.573 回答