Select2 - 在选择时，从下一个选择元素中删除禁用的属性

Posted 2023-02-25

【中文标题】Select2 - 在选择时，从下一个选择元素中删除禁用的属性

【英文标题】：Select2 - On select, remove disabled attribute from next select element

【发布时间】：2016-04-26 20:04:53

【问题描述】：

我正在使用Select2 来设置我的选择元素的样式，我希望拥有它，以便最初禁用除第一个下拉列表之外的所有选项，然后当从第一个下拉列表中选择一个选项时，从下一个下拉菜单（强制用户按顺序进行选择）。这是我所拥有的：

$('select').select2();
$('select').prop('disabled', true);
$('select:first-of-type').prop('disabled', false);

$('select').on('select2:select', function(e) 
  $(this).next('select').prop('disabled', false); // remove disabled prop from next select
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

很遗憾，$(this).next('select') 似乎没有针对下一个元素。

【参考方案1】：

使用.nextAll() 和.first() 而不是.next()，它只会“[获取] 匹配元素集中每个元素的紧随其后的兄弟元素”并且可选过滤器选择器。

.next() 不起作用的原因是因为 select2 在<select>s 之间注入了一个跨度。

$('select').select2();
$('select').prop('disabled', true);
$('select:first-of-type').prop('disabled', false);

$('select').on('select2:select', function(e) 
  $(this).nextAll('select').first().prop('disabled', false); // remove disabled prop from next select
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

【参考方案2】：

$('select').select2();
$('select').prop("disabled", true);
$('select').eq(0).prop("disabled", false);
$('select').on('select2:select', function(e) 
  var index = $(this).index('select');
  $('select').eq(index + 1).prop("disabled", false); // remove disabled prop from next select
);

【参考方案3】：

$('select').select2(allowClear: true);
$('select').prop('disabled', true);
$('select:first-of-type').prop('disabled', false);

$('select').on('select2:select', function(e) 
  $(this).nextAll('select').first().prop('disabled', false); // remove disabled prop from next select
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>