如果我通過jQuery選擇真值賦值給其他選擇選項

我在我的網站上有兩個選擇。它使用select2插件。

第一選擇：

<select name="" id=""> 
    <option value="one"></option> 
    <option value="two"></option> 
    <option value="three"></option> 
    <option value="four"></option> 
    <option value="five"></option> 
</select>

與其他一個：

<select name="" id=""> 
    <option value="other_one"></option> 
    <option value="other_two"></option> 
    <option value="other_three"></option> 
    <option value="other_four"></option> 
    <option value="other_five"></option> 
</select>

有他們的邏輯。如果選中的值爲one，則其他選擇中的值必須爲other_one（其他選項應禁用）。同樣，其他選擇選項將適用於這種情況。

我研究https://select2.github.io/options.html#adapters和Stackoverflow，是的，我可以添加觸發器來選擇和例如打印HTML或文本，但我需要不同的。

我該怎麼辦？

來源

2015-11-05 Jonathan D.

您必須添加更改事件並更改第二個選擇#select2的值，具體取決於從第一個選擇#select1中選擇的一個。

希望這會有所幫助。

$("#select1, #select2").select2(); 
 

 
$("#select1").on('change',function() 
 
{ 
 
    $('#select2 option').removeAttr('disabled'); 
 

 
    var selected_1_value = $(this).val(); 
 

 
    $("#select2").val('other_'+selected_1_value).change(); 
 
    $("#select2 option:not(:selected)").attr('disabled', 'disabled'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script> 
 

 
<select name="" id="select1"> 
 
    <option value="one">1</option> 
 
    <option value="two">2</option> 
 
    <option value="three">3</option> 
 
    <option value="four">4</option> 
 
    <option value="five">5</option> 
 
</select> 
 
<select name="" id="select2"> 
 
    <option value="other_one">other 1</option> 
 
    <option value="other_two">other 2</option> 
 
    <option value="other_three">other 3</option> 
 
    <option value="other_four">other 4</option> 
 
    <option value="other_five">other 5</option> 
 
</select>

來源

2015-11-05 23:58:12

感謝您的解決方案。我改變了我的結構litte位，但不工作if-else條件。請你能檢查一下嗎？ http://pastebin.com/WcGH4ffT –

不客氣，檢查控制檯是否有任何錯誤消息，如果你可以爲你的代碼做一個小提琴，所以我可以和你一起檢查。 –

<select name="" id="select1"> 
<option value="one">one</option> 
<option value="two">two</option> 
<option value="three">three</option> 
<option value="four">four</option> 
<option value="five">five</option>

<select name="" id="select2"> 
    <option value="other_one">other_one</option> 
    <option value="other_two">other_two</option> 
    <option value="other_three">other_three</option> 
    <option value="other_four">other_four</option> 
    <option value="other_five">other_five</option> 
</select> 

$('select').select2(); 

$("#select1").change(function() 
{ 
    $('#select2 option').prop("disabled",false); // remove disabled on all options - basically do a reset 
    $('#select2 option:selected').prop("disabled",true); // disable the current selected option 
    $('#select2').select2().select2('val', "other_" + $(this).val()); // set the value of #select2 by concatenating the value from #select1 
    $('#select2 option:not(:selected)').prop("disabled",true); // disable all other non-selected options 
});

http://jsfiddle.net/o5y9959b/10/

來源

2015-11-06 00:01:54 DinoMyte

如果我通過jQuery選擇真值賦值給其他選擇選項

回答

相關問題