Select2を使用して選択要素のスタイルを設定しています。最初のドロップダウンを除くすべてが無効になっています。最初のドロップダウンでは、disabled属性が次のドロップダウンから削除されます(ユーザは選択を順番に選択する必要があります)。ここで私が持っているものです。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')
は、次の要素をターゲットにしていないようです。
、同様の説明をありがとう! – user13286
@ user13286ようこそ。お役に立てて嬉しいです。 –