動態下拉列表（的jsfiddle包括）

我有兩個下拉列表，如圖下面的jsfiddle：動態下拉列表（的jsfiddle包括）

HTML：

<select id="first-choice"> 
    <option value="English">English</option> 
    <option value="Spanish">Spanish</option> 
</select> 

<select id="second-choice"> 
    <option value="Spanish">Spanish</option> 
    <option value="English">English</option> 
</select>

JS：

$("#first-choice").change(function() { 
    var userSelected = $(this).val() 
    alert(userSelected); 
});

什麼我試圖做的事情如下：如果用戶的首選是英文，那麼只顯示Spanis h作爲第二選擇下拉列表中的一個選項。如果用戶的第一選擇是西班牙語，那麼只能在第二選擇下拉菜單中顯示英語。

任何想法如何做到這一點。通常我會使用AJAX請求，然後在控制器中捕獲用戶選擇的參數，但由於這是一個設計註冊控制器，因此我有問題將其重寫。

來源

2015-09-05 mtcrts70

http://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery –

如果用戶首先從seconf中選擇值，會怎麼樣？ – Rayon

如果我明白你的問題，只是用這個。這很容易： https://jsfiddle.net/sherali/jkw8fxzf/12/

var $secondOption= $('#second-choice>option').clone(); 

$("#first-choice").change(function() { 
    var userSelected = $(this).val(); 

    $('#second-choice').html($secondOption); 

    // $("#second-choice").val(userSelected) 
    $('#second-choice option[value="'+userSelected+'"').remove() 
});

來源

2015-09-05 19:44:09

我改變了你的jsFiddle。下面是代碼：

$("#first-choice").change(function() { 
    var userSelected = $(this).val(); 
    var otherOption = $('#second-choice option[value!="' + userSelected + '"]').get(0); 
    $('#second-choice').get(0).selectedIndex = otherOption.index; 
});

這裏是鏈接到新的小提琴：

https://jsfiddle.net/jkw8fxzf/11/

但如果你想其他的選擇只包含「其他」選項你必須避免其他選項數據somewere。這是其他的jsfiddle。

https://jsfiddle.net/jkw8fxzf/18/

和其他解決方案：

$("#first-choice").change(function _optionHandler() { 
    var userSelected = $(this).val(); 
    var second = $('#second-choice'); 
    if(typeof _optionHandler.oldOption != 'undefined') { 
     $("<option/>", { 
      text: _optionHandler.oldOption.text, 
      value: _optionHandler.oldOption.value 
     }).appendTo(second); 
     delete _optionHandler.oldOption; 
    } 
    var otherOption = $('#second-choice > option[value!="' + userSelected + '"]').get(0); 
    second.get(0).selectedIndex = otherOption.index; 
    var optionToRemove = $('#second-choice > option[value="' + userSelected + '"]'); 
    _optionHandler.oldOption = { 
     text: optionToRemove.text(), 
     value: optionToRemove.val() 
    } 
    optionToRemove.remove(); 
});

我希望這有助於。

來源

2015-09-05 19:29:36

答案已編輯。 –

你可以動態地將數據追加到第二選擇是這樣的...

<select id="first-choice"> 
    <option value="English">English</option> 
    <option value="Spanish">Spanish</option> 
</select> 

<select id="second-choice"> 

</select>

JS：

$("#first-choice").change(function() { 
    var userSelected = $(this).val() 
    if($(this).val() == "English"){ 
     var element = "option"; 
     var val = "Spanish"; 
     var html = "<"+element+" value='"+val+"'>"+val+"</"+element+">"; 
    $("#second-choice").empty(); 
    $("#second-choice").append(html); 

    } 
    else if($(this).val() == "Spanish"){ 
     var element = "option"; 
     var val = "English"; 
     var html = "<"+element+" value='"+val+"'>"+val+"</"+element+">"; 
     $("#second-choice").empty(); 
     $("#second-choice").append(html); 
    } 
});

JsFiddle

來源

2015-09-05 19:36:10

我還包括萬一一個額外的部分，你會喜歡這個工作倒過來。

$("#first-choice").change(function() { 
    var selected = $(this).val() 
    if(selected== "English"){ 
     $("#second-choice option[value='Spanish']").attr("selected","selected"); 
    } 
    else if(selected == "Spanish"){ 
     $("#second-choice option[value='English']").attr("selected","selected"); 
    } 
}); 

$("#second-choice").change(function() { 
    var selected = $(this).val() 
    if(selected== "English"){ 
     $("#first-choice option[value='Spanish']").attr("selected","selected"); 
    } 
    else if(selected == "Spanish"){ 
     $("#first-choice option[value='English']").attr("selected","selected"); 
    } 
});

小提琴：https://jsfiddle.net/uyf7uprd/1/

來源

2015-09-05 19:52:01 Wracker

動態下拉列表（的jsfiddle包括）

回答

相關問題