Question

编辑，是的我知道this问题，但答案并不完全适用于我的案例

我正在寻找此案例的解决方案

当用户从一个选择框中选择一个选项时，其他选择框的选项应隐藏。
当所选选项更改或被删除（选择空白选项）时，之前选择的选项应再次可用于其他选择框。

我当前代码的问题：

当选项更改时，前一个选项不会“释放”到其他选择框，因此在页面重新加载之前不能再次使用它。
基本上，先前选择的选项的结果与其他选择框相反。

我包括一个小提琴，所以你可以为自己看到它。

$(document).ready(function() {

  // this "initializes the boxes"
  $('.update-select').each(function(box) {

    var value = $('.update-select')[box].value;

    if (value) {

      $('.update-select').not(this).find('option[value="' + value + '"]').hide();
    }
  });

  // this is called every time a select box changes
  $('.update-select').on('change', function(event) {

    var prevValue = $(this).data('previous');
    $('.update-select').not(this).find('option[value="' + prevValue + '"]').show();
    var value = $(this).val();

    if (value) {

      $(this).data('previous', value);
      console.log($(this).data('previous', value));
      $('.update-select').not(this).find('option[value="' + value + '"]').hide();
    }

  });
});

* {
  box-sizing: border-box;
  font-size: 1em;
  font-family: sans-serif;
}

body {
  display: flex;
  float: right;
}

body div {
  margin: 20px;
}

select {
  border: 2px solid #78909c;
  padding: 10px;
  border-radius: 5px;
  outline: none
}

select:focus {
  border: 2px solid #ff9800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>stock 1</h3>
  <select name="tracker[stockitems][0]" class="update-select">
    <option value=""></option>
    <option value="1" selected>tracker 1</option>
    <option value="3">tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

<div>
  <h3>stock 2</h3>
  <select name="tracker[stockitems][1]" class="update-select">
    <option value=""></option>
    <option value="1">tracker 1</option>
    <option value="3" selected>tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

<div>
  <h3>stock 3</h3>
  <select name="tracker[stockitems][2]" class="update-select">
    <option value=""></option>
    <option value="1">tracker 1</option>
    <option value="3">tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

Answer 1

这很简单。只需.show() option所有select，然后使用您之前的代码重新初始化$(document).ready(function() { function intializeSelect() { // this "initializes the boxes" $('.update-select').each(function(box) { var value = $('.update-select')[box].value; if (value) { $('.update-select').not(this).find('option[value="' + value + '"]').hide(); } }); }; intializeSelect(); // this is called every time a select box changes $('.update-select').on('change', function(event) { $('.update-select').find('option').show(); intializeSelect(); }); });。

＆＃13;

* {
  box-sizing: border-box;
  font-size: 1em;
  font-family: sans-serif;
}

body {
  display: flex;
  float: right;
}

body div {
  margin: 20px;
}

select {
  border: 2px solid #78909c;
  padding: 10px;
  border-radius: 5px;
  outline: none
}

select:focus {
  border: 2px solid #ff9800;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>stock 1</h3>
  <select name="tracker[stockitems][0]" class="update-select">
    <option value=""></option>
    <option value="1" selected>tracker 1</option>
    <option value="3">tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

<div>
  <h3>stock 2</h3>
  <select name="tracker[stockitems][1]" class="update-select">
    <option value=""></option>
    <option value="1">tracker 1</option>
    <option value="3" selected>tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

<div>
  <h3>stock 3</h3>
  <select name="tracker[stockitems][2]" class="update-select">
    <option value=""></option>
    <option value="1">tracker 1</option>
    <option value="3">tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

＆＃13;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="jstut.js"></script>

    <style type="text/css">
      body {font-size: 1.6em;}
      .hidden {display:none;}
      .show {display:inline !important;}
      button {
        border: 2px solid black; background: #E5E4E2;
        font-size: .5em; font-weight: bold; color: black;
        padding: .8em 2em;
        margin-top: .4em;
      }
    </style>
  </head>
  <body>
    <p id="sayHello"></p>

    <script> 
      var yourName = prompt("What is your name?");
      if(yourName!= null){
        document.getElementById("sayHello").innerHTML = "Hello " + yourName;
      }else{
        alert("Please enter your name correctly");
      }
    </script>

    <script> 
      var myAge = prompt("What is your age");
      if(myAge < 4){
        document.write ("You should be in preschool";
      }else if(my age > 4 && <18){
        document.write("You should be in public private school");
      }else if (my age >18 && <24){
        document.write("You should be in college");
      }
      else{ document.write(your in the work force now);}
    </script>
  </body>
</html>

＆＃13;

Answer 2

这是我的解决方案：

$(document).ready(function() {
    $(document).on('change', '.update-select', function(e) {
        $('option').show();

        var selectedOptionsGlobal = [];

        $.each($('.update-select'), function(key, select) {
            var selectedOptionValue = $(select).val();

            if (selectedOptionValue !== "") {
                selectedOptionsGlobal.push(selectedOptionValue);
            }
        });

        for (var i = 0; i < selectedOptionsGlobal.length; i++) {
            $('option[value="'+selectedOptionsGlobal[i]+'"]').hide();
        }
    });
});

隐藏其他选择框中的选定选项

2 个答案: