Question

我想做一些像链接多个选择框一样的东西，使用jquery，有没有办法做到这一点？例如，我有Select Box 1,2,3，每个选择框都有选项asa，b，c。现在我想要的是如果选择框1选择a，其他两个选择将没有选择选项那里，我将选择框1更改为null后，该选项也应出现在其他两个。

＆＃13;

<select id="1">
<option value="">Select an option</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select id="2">
<option value="">Select an option</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>


<select id="3">
<option value="">Select an option</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

＆＃13;

Answer 1

尝试使用这些脚本，希望这些将有助于不要忘记添加您的jquery库。试试这些简单的脚本。

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





 <script>

        $(function(){

        $(document).on("change","#1",function(){
          var el = $(this);
          var val = $.trim(el.val());
          (val == '') ?  $("#2,#3").val("").change() : $("#2,#3").val(val).change();
        });
        });

    </script>

Answer 2

检查下面的小提琴。

https://jsfiddle.net/ponmudi/h1qn3k4a/1/

$("select").change(function() {
    let curId = $(this).attr('id');
    let str = $(this).val();
    //"Select an option": "",
    var newOptions = {  
        "A": "A",
        "B": "B",
        "C": "C"
    };
    delete newOptions[str];
    $("select").each(function() {
        let nowId = $(this).attr('id');
        if (nowId !== curId) {
            $el = $("#" + nowId);
            $el.empty();
            $.each(newOptions, function(key, value) {
                $el.append($("<option></option>")
                    .attr("value", value).text(key));
            });
        }
    });

});

如何链接多个选择框？

2 个答案: