Question

我有一个带有NodeJ的本地服务器，在一个页面上我有三个选择标签。我想选择第一个选择标记中的一个选项，将其从另一个选择标记的列表中完全删除。不幸的是，似乎没有发生任何事情。文件remove.js在public / js中（所以不要认为这是问题）

HTML：

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script type="text/javascript" src="/js/remove.js"></script>

<select name="rank1" size="1" id="select1" >
    <option value="" selected disabled hidden>Rank</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
 </select>

<select name="rank2" size="1" id="select2" >
    <option value="" selected disabled hidden>Rank</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
 </select>

<select name="rank3" size="1" id="select3" >
    <option value="" selected disabled hidden>Rank</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
 </select>

JavaScript remove.js：

    $(document).ready(function(){
      $("select").change(function(){
       var selectedValue1 = $(this).val();
       var selectedValue2 = $("select").not($(this)).val();
       $(this).find("option[value!="+selectedValue2+"]").show();
       $("select").not($(this)).find("option[value!="+selectedValue1+"]").show();
       $("select").not($(this)).find("option[value="+selectedValue1+"]").hide();
    });
  });

提前谢谢！

Answer 1

您未能包含JQuery。

改变这个：

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

致：

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

Answer 2

更改javascript写这个

  $(document).ready(function () {
        var selected = 0
        var prevSelected = 0;
       $("select").change(function () {
            prevSelected = selected;
            selected = $(this).val();
            $("select").not("#"+this.id).each(function(){
                $("#"+this.id).find("[value=" + selected + "]").hide();
                $("#"+this.id).find("[value=" + prevSelected + "]").show();
            })
        });
    });

Answer 3

我认为这可能会使原始代码无法正常工作。

$(document).ready(function(){

var select1,select2,select3;

      $("#select1").change(function(){
        if(select1 > 0){
  $("#select2").find("option[value="+select1+"]").removeAttr('disabled');
  $("#select3").find("option[value="+select1+"]").removeAttr('disabled');
    }
        select1 = $(this).val();
  $("#select2").find("option[value="+select1+"]").attr("disabled","disabled");
  $("#select3").find("option[value="+select1+"]").attr("disabled","disabled");
    });

    $("#select2").change(function(){
    if(select2 > 0){
  $("#select1").find("option[value="+select2+"]").removeAttr('disabled');
  $("#select3").find("option[value="+select2+"]").removeAttr('disabled');
    }
        select2 = $(this).val();
  $("#select1").find("option[value="+select2+"]").attr("disabled","disabled");
  $("#select3").find("option[value="+select2+"]").attr("disabled","disabled");

    });

    $("#select3").change(function(){
     if(select3 > 0){
  $("#select1").find("option[value="+select3+"]").removeAttr('disabled');
  $("#select2").find("option[value="+select3+"]").removeAttr('disabled');
    }
        select3 = $(this).val();
  $("#select1").find("option[value="+select3+"]").attr("disabled","disabled");
  $("#select2").find("option[value="+select3+"]").attr("disabled","disabled");

  });


});

JavaScript select标记删除所选选项

3 个答案: