动态下拉列表（包括 JSFiddle）答案

【问题标题】：Dynamic Dropdown Lists (JSFiddle Included)动态下拉列表（包括 JSFiddle）
【发布时间】：2015-09-05 19:09:07
【问题描述】：

我有两个下拉列表，如下面的 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);
});

我正在尝试做的事情如下：如果用户的第一选择是英语，那么在第二选择下拉列表中只显示西班牙语作为选项。如果用户的第一选择是西班牙语，那么在第二选择下拉列表中只显示英语。

关于如何做到这一点的任何想法。通常我会使用 AJAX 请求，然后在控制器中捕获用户选择的参数，但由于这是一个设计注册控制器，我在覆盖它时遇到了问题。

【问题讨论】：

stackoverflow.com/questions/314636/…
如果用户先从 seconf 中选择值怎么办？

标签： javascript jquery html ruby-on-rails devise

【解决方案1】：

如果我理解您的问题，请使用它。这简单： 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()
});

【讨论】：

【解决方案2】：

您可以像这样动态地将数据附加到第二选择中...

<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

【讨论】：

【解决方案3】：

我还包括一个额外的部分，以防您希望它以相反的方式工作。

$("#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/

【讨论】：

【解决方案4】：

我已经改变了你的 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/

但如果您希望其他选择仅包含“其他”选项您必须保留其他选项的数据。这是其他的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();
});

我希望这会有所帮助。

【讨论】：