如何在同一時間更改兩個選擇>選項下拉列表

我希望當我從一個下拉列表中選擇一個選項時，同時其他下拉列表值應根據第一個下拉列表中的值進行更改。例如：如果我從'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>

來源

2013-12-24 user3130064

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>

來源

2013-12-24 01:31:00

正是如此！非常感謝！ – user3130064

@ user3130064歡迎高興地幫助:) –

先給身份的選擇

<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

來源

2013-12-24 01:31:23

感謝您的回答，但我無法讓它工作=/http://jsfiddle.net/9WgjU/ – user3130064

你遺漏了所有的ID和值。 http://jsfiddle.net/9WgjU/1/ –

是事實。謝謝！ – user3130064

試試這個：

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

這裏的DEMO

來源

2013-12-24 01:37:46 HICURIN

真的非常感謝！ – user3130064

您可以爲每個選擇綁定更改事件。在這裏看到的演示：DEMO

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

來源

2013-12-24 01:42:35

與純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這裏..

來源

2013-12-24 01:59:58 Arda

演示：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); 
     } 
    }); 
});

來源

2013-12-24 02:10:45

如何在同一時間更改兩個選擇>選項下拉列表

回答

相關問題