启用禁用基于先前的下拉菜单选择选项？

编程问答 2022-08-15

问题描述

我有2个下拉菜单，假设选择1并选择2，则场景为 当用户在选择1 上选择下拉菜单并选择A时，在选择2 上，选项A将被禁用。

这是我的代码，实际上这是有效的，

但是我有一个条件，当用户将编辑下拉菜单时，在选择1个用户时已经选择了A，但是仍然选择了2个，我要选择的2中的选项A必须被禁用，但目前仍然启用>

jsfiddle https://jsfiddle.net/q3mu7x2w/ 

$("#pr_bundling").change(function(){

    $("#pr_cross").find("option").each(function(){
        $(this).removeAttr("disabled");
    });
    $("#pr_cross [value=" + $(this).val() + "]").attr("disabled","disabled");

    $('#pr_cross').not(this).has('option[value="'+  this.value + '"]:selected').val('noselect29');



})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>select 1</h3>
  <select class="form-control" id="pr_bundling">
    <option value='noselect99' selected >Select</option>
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<br>

<h3>select 2</h3>
 <select class="form-control" id="pr_cross">
      <option value='noselect29' selected >Select</option>
     <option value="A">A</option>
     <option value="B">B</option>
     <option value="C">C</option>
     <option value="D">D</option>
 </select>

解决方法

通过将更新代码移到函数中并在#pr_bundling上调用（直接或通过.trigger），可以确保在页面加载时禁用从$(document).ready进行的初始选择。 

function update_select() {
  let selected = $('#pr_bundling').val();
  $("#pr_cross").find("option").each(function() {
    $(this).removeAttr("disabled");
  });
  $("#pr_cross [value=" + selected + "]").attr("disabled","disabled");
}
$(document).ready(function() {
  $("#pr_bundling").change(update_select);
  update_select();
  // or you can trigger the change handler:
  // $("#pr_bundling").trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>select 1</h3>
<select class="form-control" id="pr_bundling">
  <option value='noselect99' selected>Select</option>
  <option value="A" selected>A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<br>

<h3>select 2</h3>
<select class="form-control" id="pr_cross">
  <option value='noselect29' selected>Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>

,

在禁用选择2的值时，选择器错误。

pClosed

jsfiddle：https://jsfiddle.net/bs7h0got/

dropdownhtmljqueryoptionselectselect