在第二个“选择”部分中选择选项时，该特定选项不会隐藏在第一个“选择”部分中

Question

如何复制问题：如果我在第一个“选择”中选择一个选项，该特定选项将隐藏在第二个“选择”中。但是接下来，如果我在第二个“选择”中选择一个选项，新选择的选项不会隐藏在第一个“选择”中我怎样才能做到这一点？每当我选择某些内容时，它都应该隐藏在其他“选择”部分中$(function() {  var sec = $('.security');  sec.change(function() {    console.log("security change!");    let currentSelect = sec.find('option:selected').val();    $('.security option').each(function() {      var self = $(this);      if (self.val() === currentSelect) {        self.hide();      } else {        self.show();      }    });  }).change();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="col-sm-6 form-group">  <label for="security-question-1"><span class="trn">Security Question</span> 1 *</label>  <select class="form-control security" id="security-question-1">    <option class="trn" disabled selected value>select a question</option>    <option class="trn" value="q1">What is the name of your first school?</option>    <option class="trn" value="q2">What is your favorite movie?</option>    <option class="trn" value="q3"> What is your mother's maiden name?</option>    <option class="trn" value="q4">What street did you grow up on?</option>  </select></div><div class="col-sm-6 form-group">  <label for="security-question-2"><span class="trn">Security Question</span> 2 *</label>  <select class="form-control security" id="security-question-2">    <option class="trn" disabled selected value>select a question</option>    <option class="trn" value="q1">What is the name of your first school?</option>    <option class="trn" value="q2">What is your favorite movie?</option>    <option class="trn" value="q3"> What is your mother's maiden name?</option>    <option class="trn" value="q4">What street did you grow up on?</option>  </select></div>

Answer 1

试试这个，也看看我的评论

$(function () {

      var sec = $('.security');

      sec.change(function () {

        let currentSelect=$(this).find('option:selected').val(); // Your code use sec.find() which is wrong since it picks the first selected option of first select.

        $('.security option').show();

        $('.security option[value="' + currentSelect + '"]').hide(); // This is shorter code.

      }).change();

  });

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

<div class="col-sm-6 form-group">

  <label for="security-question-1"><span class="trn">Security Question</span> 1 *</label>

  <select class="form-control security" id="security-question-1">

    <option class="trn" disabled selected value>select a question</option>

    <option class="trn" value="q1">What is the name of your first school?</option>

    <option class="trn" value="q2">What is your favorite movie?</option>

    <option class="trn" value="q3"> What is your mother's maiden name?</option>

    <option class="trn" value="q4">What street did you grow up on?</option>

  </select>

</div>

  <div class="col-sm-6 form-group">

    <label for="security-question-2"><span class="trn">Security Question</span> 2 *</label>

    <select class="form-control security" id="security-question-2">

      <option class="trn" disabled selected value>select a question</option>

      <option class="trn" value="q1">What is the name of your first school?</option>

      <option class="trn" value="q2">What is your favorite movie?</option>

      <option class="trn" value="q3"> What is your mother's maiden name?</option>

      <option class="trn" value="q4">What street did you grow up on?</option>

    </select>

  </div>