如何同时更改两个选择>选项下拉列表[关闭]答案

【问题标题】：How to change two select> option dropdown in the same time [closed]如何同时更改两个选择>选项下拉列表[关闭]
【发布时间】：2014-01-12 06:25:00
【问题描述】：

我希望当我从一个下拉菜单中选择一个选项时，同时其他下拉菜单的值应该根据第一个而改变。

例如：如果我从 'dropdown 1' 中选择 'Value 1' ，那么在 'dropdown 2' 它应该自动更改为相同的值（'Value 1'）。

谁能帮帮我？提前谢谢你！

这是我的演示。

DEMO

<select name="" id="">
  <option value="">Select</option>
  <option value="">Value 1</option>
  <option value="">Value 2</option>
</select>

<select name="" id="">
   <option value="">Select</option>
   <option value="">Value 1</option>
   <option value="">Value 2</option>
</select>

【问题讨论】：

标签： javascript jquery html forms drop-down-menu

【解决方案1】：

fiddle Demo

$(function () {
    var select = $('select.select');
    select.change(function () {
        select.not(this).val(this.value);
    });
});

HTML

为选项添加了类选择和值

<select name="" id="" class="select">
    <option value="">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>
<select name="" id="" class="select">
    <option value="">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>

【讨论】：

【解决方案2】：

首先为选择赋予身份

<select name="" id="one">
    <option value="">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>
<select name="" id="two">
    <option value="">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>

然后

jQuery(function ($) {
    var $set = $('#one, #two')
    $set.change(function () {
        $set.not(this).val(this.value)
    })
})

演示：Fiddle

【讨论】：

感谢您的回答，但我无法使其工作 = / jsfiddle.net/9WgjU
您遗漏了所有的 ID 和值。 jsfiddle.net/9WgjU/1
这是仅有的具有 2 路绑定并允许您自定义类的解决方案之一。谢谢！

【解决方案3】：

试试这个：

$(function(){
    $('#s1')[0].selectedIndex = 0;
    $('#s1').change(function(){
        var index = $(this)[0].selectedIndex;
        $('#s2')[0].selectedIndex = index;
    });    
});

这里是DEMO

【讨论】：

【解决方案4】：

您可以为每个选择绑定更改事件。在此处查看演示：DEMO

    $("#select-1").on("change",function(){
        $("#select-2").val($(this).val());
    })
    $("#select-2").on("change",function(){
        $("#select-1").val($(this).val());
    })

【讨论】：

【解决方案5】：

纯javascript

<select name="test1" id="test1">
    <option value="0">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>
<select name="test2" id="test2">
    <option value="0">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>
<script>
document.getElementById('test1').addEventListener("change", function () {
    document.getElementById('test2').selectedIndex = document.getElementById('test1').selectedIndex;
}, false);
</script>

Fiddle 这里..

【讨论】：

【解决方案6】：

演示： Fiddle

HTML：

<select name="" id="one">
    <option value="">Select</option>
    <option value="">Value 1</option>
    <option value="">Value 2</option>
</select>

<select name="" id="two">
    <option value="">Select</option>
    <option value="">Value 1</option>
    <option value="">Value 2</option>
</select>

jQuery：

$('#one').on('change', function(){
    $("#two option").each(function(){
        if ($(this).text() == $('#one option:selected').text()) {
            $(this).attr('selected',true);
        }
    });
});

【讨论】：