Question

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

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

从用户角度来看，如果有人会选择“红色”（值= 1）和“棕色”（值= 5）选择英文，我想要“rubrum”拉丁语选择中出现“（value = 1）和”rufum“（value = 5）。

对于<input>代码，这可行：

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

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

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

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

编辑：如果可能的话，我喜欢它可以用于单选和多选。我知道起初我并没有在我的小提琴中反映出来，抱歉。

Answer 1

我在那里看到你的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);
});

Fiddle

Answer 2

<select>元素具有属性selectedIndex，用于指示选择了哪些选项。

如果您获得了selectedIndex <select>的{{1}}，那么将另一个selectedIndex的{{1}}设置为该<select>，您应该得到您正在寻找的结果

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

（这就是jQuery受欢迎的原因：JavaScript DOM界面常常糟透了。）

Answer 3

$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.attr('selectedIndex', $(this).attr('selectedIndex'));

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

3 个答案:

HTML：

jQuery的：