如何在同一时间更改两个选择>选项下拉列表

I want that when I select an option from one dropdown,at the same time other dropdown value should change according to the first one.

我希望当我从一个下拉列表中选择一个选项时,同时其他下拉列值应根据第一个下拉列表更改。

For example: if I choose 'Value 1' from 'dropdown 1' , then in 'dropdown 2' it should change automatically to the same value('Value 1').

例如:如果我从“下拉列表1”中选择“值1”,则在“下拉列表2”中,它应自动更改为相同的值(“值1”)。

Can anyone help-me please? I thank you in advance!

有人可以帮我吗?我提前谢谢你!

Here is my Demo.

这是我的演示。

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>

6 个解决方案

#1

fiddle Demo

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

HTML

added class select and value to options

为选项添加了类选择和值

<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

with pure javascript

用纯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 here..

#3

First give identities to the selects

首先给出选择的身份

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

Then

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

Demo: Fiddle

#4

Demo: 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);
        }
    });
});

#5

Try this:

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

Here's DEMO

#6

You could bind change event for each select. See the demo here:DEMO

您可以为每个选择绑定更改事件。请参阅此处的演示:DEMO

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

#1