Select2 - On select, удалить отключенный атрибут из следующего элемента select

Question

Я использую 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').

Answer 1

Использование .nextAll() и .first() вместо .next(), который только «[получает] непосредственно следующие родственную каждый элемент в наборе соответствующих элементов» и опционально фильтры, что с помощью селектора.

Причина, по которой просто .next() не работает, заключается в том, что интервал вводится между <select> s по выбору2.

$('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>

Answer 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 
}); 

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>