Question

我有两个下拉列表，如下面的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请求，然后在控制器中捕获用户选择的参数，但由于这是一个设备注册控制器，我有问题覆盖它。

Answer 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()
});

Answer 2

我改变了你的jsFiddle。这是代码：

server unix:/var/www/rails/myapp/tmp/sockets/unicorn.sock      fail_timeout=0;

这里是新小提琴的链接：

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

但是如果你想让其他选择只包含'其他'选项你必须保留其他选项的数据。这是其他jsfiddle。

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

和其他解决方案：

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

我希望这会有所帮助。

Answer 3

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

<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

Answer 4

我还包括一个额外的部分，以防你希望这种方式相反。

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

动态下拉列表（包含JSFiddle）

4 个答案: