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

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>