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

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 () {&nbsp; &nbsp; &nbsp; var sec = $('.security');&nbsp; &nbsp; &nbsp; sec.change(function () {&nbsp; &nbsp; &nbsp; &nbsp; 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.&nbsp; &nbsp; &nbsp; &nbsp; $('.security option').show();&nbsp; &nbsp; &nbsp; &nbsp; $('.security option[value="' + currentSelect + '"]').hide(); // This is shorter code.&nbsp; &nbsp; &nbsp; }).change();&nbsp; });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="col-sm-6 form-group">&nbsp; <label for="security-question-1"><span class="trn">Security Question</span> 1 *</label>&nbsp; <select class="form-control security" id="security-question-1">&nbsp; &nbsp; <option class="trn" disabled selected value>select a question</option>&nbsp; &nbsp; <option class="trn" value="q1">What is the name of your first school?</option>&nbsp; &nbsp; <option class="trn" value="q2">What is your favorite movie?</option>&nbsp; &nbsp; <option class="trn" value="q3"> What is your mother's maiden name?</option>&nbsp; &nbsp; <option class="trn" value="q4">What street did you grow up on?</option>&nbsp; </select></div>&nbsp; <div class="col-sm-6 form-group">&nbsp; &nbsp; <label for="security-question-2"><span class="trn">Security Question</span> 2 *</label>&nbsp; &nbsp; <select class="form-control security" id="security-question-2">&nbsp; &nbsp; &nbsp; <option class="trn" disabled selected value>select a question</option>&nbsp; &nbsp; &nbsp; <option class="trn" value="q1">What is the name of your first school?</option>&nbsp; &nbsp; &nbsp; <option class="trn" value="q2">What is your favorite movie?</option>&nbsp; &nbsp; &nbsp; <option class="trn" value="q3"> What is your mother's maiden name?</option>&nbsp; &nbsp; &nbsp; <option class="trn" value="q4">What street did you grow up on?</option>&nbsp; &nbsp; </select>&nbsp; </div>