Select2 - Bei Auswahl entfernen Sie das deaktivierte Attribut vom nächsten Auswahlelement

Question

Ich verwende Select2, um meine ausgewählten Elemente zu formatieren, und ich möchte, dass alle außer dem ersten Dropdown zunächst deaktiviert werden und dann eine Option aus dem ausgewählt wird Erstes Dropdown-Menü, das deaktivierte Attribut wird aus dem nächsten Dropdown-Menü entfernt (erzwingt, dass der Benutzer seine Auswahl in der richtigen Reihenfolge trifft). Hier ist, was ich habe:

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

Leider $(this).next('select') nicht zu sein scheint das nächste Element Targeting.

Answer 1

Verwenden .nextAll() und .first() anstelle von .next(), die nur „[wird], die unmittelbar jedes Element in dem Satz von abgestimmten Elementen folgenden Geschwister“ und optionaly Filter dass durch einen Selektor.

Der Grund, warum nur .next() nicht funktioniert, ist, weil ein Span zwischen den <select> s von select2 injiziert wird. sowie

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