禁用動態下拉選項值 onchange another dynamic dropdown

Question

當我單擊“添加新字段”時，我有一個按鈕，它將填充一個新的選擇：

所有下拉創建的類是“staff_list”和name="staff_id[]" 創建的下拉元素的最大限制為5，並且允許用戶刪除創建的下拉列表。 .

問題：如何禁用已在另一個下拉列表中選擇的下拉值？

• 例如，如果我在第一個下拉列表中選擇值 A，則禁用所有創建的值為 A 的下拉選項。

• 如果第二個下拉選擇的值是 C。所有其他包含 C 的選項也被禁用

• 但是，如果用戶刪除選擇了值 A 的下拉列表。

• 選項值 其他下拉列表中可用的更改。

我該如何解決這個問題？

下面是我的示例代碼：

 var add_button = $(".add_sign"); var wrapper = $(".sign"); var max_fields = 6; var x = 1; $(add_button).click(function(e) { if (x < max_fields) { x++; $(wrapper).append('<div class="input-group sign_user"><select class="staff_list" name="staff_id"><option value="">--Select staff--</option><option value="a">A</option><option value="b">B</option><option value="c">C</option></select><span class="input-group-btn delete_sign"><a href="#" class="btn btn-sm btn-danger">X</a></span></div>'); } else { alert('Maximum 5 Authorised Signatory only!'); } }); //Delete staff_list $(wrapper).on("click", ".delete_sign", function(e) { e.preventDefault(); $(this).parent('div').remove(); x--; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sign"> <button class="add_sign">Add New Field &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span> </button> </div>

Answer 1

我會做一個函數，檢查每一個選擇的值，然后使所有option S，通過搜索.staff_list S表示option該陣列S中的當前沒有選擇，並禁用它們。

將該函數作為偵聽wrapper添加到wrapper （使用事件委托）並在附加更多<select>之后運行它（以確保新選項的值被正確禁用），並在<select>被刪除后運行它（因此如果那個<select>了任何東西，它的值現在會在其他元素中再次啟用）。

這可確保在發生更改時正確重新計算 disabled option s。

請注意，由於當前只有 3 個可能的值（ a 、 b和c ），因此當前只能更改三個select s - 之后，每個可能的選項（默認值除外）都將被禁用。

 var add_button = $(".add_sign"); var wrapper = $(".sign"); var max_fields = 6; var x = 1; add_button.click(function(e) { if (x < max_fields) { x++; wrapper.append('<div class="input-group sign_user"><select class="staff_list" name="staff_id"><option value="">--Select staff--</option><option value="a">A</option><option value="b">B</option><option value="c">C</option></select><span class="input-group-btn delete_sign"><a href="#" class="btn btn-sm btn-danger">X</a></span></div>'); recalcDisabled(); } else { alert('Maximum 5 Authorised Signatory only!'); } }); //Delete staff_list $(wrapper).on("click", ".delete_sign", function(e) { e.preventDefault(); $(this).parent('div').remove(); recalcDisabled(); x--; }); wrapper.on('change', 'select', recalcDisabled); function recalcDisabled() { const selectedValues = $('.staff_list') .map((_, sel) => sel.value) .get() .filter(Boolean); // Filter out the empty string $('.staff_list option').prop('disabled', false); selectedValues.forEach(value => { $(`.staff_list[value!="${value}"] option[value="${value}"]`) .prop('disabled', true); }); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sign"> <button class="add_sign">Add New Field &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span> </button> </div>