Question

我正在使用Select2来设置我的选择元素的样式，我想拥有它，以便除了第一个下拉列表之外的所有元素都被禁用，然后当从第一个下拉列表中选择一个选项时，将删除disabled属性从下一个下拉列表（强制用户按顺序进行选择）。这就是我所拥有的：

＆＃13;

$('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
});

＆＃13;

<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>

＆＃13;

不幸的是$(this).next('select')似乎没有针对下一个元素。

Answer 1

使用.nextAll()和.first()代替.next()，只有＆＃34; [获取]匹配元素集合中每个元素的紧随其后的兄弟＆＃34;和选择性的过滤器。

仅.next()无法工作的原因是因为select {2}在<select> s之间注入了一个范围。

＆＃13;

$('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
});

＆＃13;

<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>

＆＃13;

Answer 2

<style name="question_dialog" parent="@android:style/Theme.Holo.Dialog">
    <item name="android:windowTitleStyle">@style/question_dialog_title</item>
</style>

<style name="question_dialog_title" parent="android:Widget.TextView">
    <item name="android:background">#5cc5cc</item>
    <item name="android:textSize">21sp</item>
    <item name="android:textColor">#ffffff</item>
</style>

Answer 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>

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

3 个答案: