Question

我正尝试在选择一个div后立即禁用其所有选项。我被卡住了。

试图使用onchange。但是，每当我尝试禁用选择项时，要么全部要么全不选择，并且不在同一父元素（例如div或表行）之内

<div>

1: <select class="first">
<optgroup label="Div 1, select 1">
  <option value="">...</option>
  <option value="1-1">1.1</option>
  <option value="1-2">1.2</option>
  </optgroup>
</select><br />
2: <select class="second">
<optgroup label="Div 1, select 2">
  <option value="">...</option>
  <option value="1-1">1.1</option>
  <option value="1-2">1.2</option>
  </optgroup>
</select>
</div>
<div>
1: <select class="first">
<optgroup label="Div 2, select 1">

  <option value="">...</option>
  <option value="2-1">1.1</option>
  <option value="2-2">1.2</option>
  </optgroup>
</select><br />
2: <select class="second">
<optgroup label="Div 2, select 2">
  <option value="">...</option>
  <option value="2-1">1.1</option>
  <option value="2-2">1.2</option>
  </optgroup>
</select>
</div>


$('div option:selected').closest(select).attr('disabled','disabled');

Szenario：

http://jsfiddle.net/1keyup/no8abt0m/11/

非常感谢您

Answer 1

我认为您需要分别处理主要div。

$('.item1-first-div').on('change', function() {
  var value = $('.item1-first-div').val();
  if (value) {
    $('.item2-first-div').prop('disabled', true);
  } else {
    $('.item2-first-div').prop('disabled', false);
  }

});

$('.item1-second-div').on('change', function() {
  var value = $('.item1-second-div').val();
  if (value) {
    $('.item2-second-div').prop('disabled', true);
  } else {
    $('.item2-second-div').prop('disabled', false);
  }
});

* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
}

div {
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.1);
  padding: 10px 15px;
  margin: 15px
}

select {
  padding: 5px 7px;
}

.first {
  margin-bottom: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>

  1: <select class="first item1-first-div">
<optgroup label="Div 1, select 1">
  <option value="">...</option>
  <option>1.1</option>
  <option>1.2</option>
  </optgroup>
</select><br /> 2: <select class="second item2-first-div">
<optgroup label="Div 1, select 2">
  <option value="">...</option>
  <option>1.1</option>
  <option>1.2</option>
  </optgroup>
</select>
</div>
<div>
  1: <select class="first item1-second-div">
<optgroup label="Div 2, select 1">

  <option value="">...</option>
  <option value="1-1">1.1</option>
  <option value="1-2">1.2</option>
  </optgroup>
</select><br /> 2: <select class="second item2-second-div">
<optgroup label="Div 2, select 2">
  <option value="">...</option>
  <option value="2-1">1.1</option>
  <option value="2-2">1.2</option>
  </optgroup>
</select>
</div>

选择第一个时，禁用同一div中的其他选项

1 个答案: