JQuery - Dropdownlists選擇依賴關係

我需要關於dropdownlist選項相互依賴的幫助。假設我在下面有兩個下拉列表。JQuery - Dropdownlists選擇依賴關係

<select name="List1" id="List1"> 
    <option value="">Select Item</option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
    <option value="d">d</option>    
</select> 

<select id="List2" name="List2"> 
    <option value="">Select Item</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select>

Scenerios如下：

列表2將列出所有的默認（List1中沒有選擇）
如果選項列表1中選擇「是」或「d」，則列表2仍將會保持相同，沒有選擇任何選項。
如果在List2中選擇選項「b」或「c」，則選擇List2中的選項2，並且用戶也不能在List2中選擇其他選項。
但是，當用戶選擇「a」或「d」時，列表將再次回到默認值，用戶可以選擇List2中的任何項目。

如果可能，請幫助提供示例代碼。

感謝，

來源

2014-02-20 Milacay

告訴我們你到目前爲止的代碼 – Huangism

我不知道如何。我正在努力....弄清楚。 – Milacay

我認爲你在方案3中有一個錯字。'如果在List1中選擇了選項「b」或「c」，而不是在List2中。 – lebolo

好像邏輯是非常具體的，所以不知道更多的細節，我們真的不能一概而論。但是，這個jsFiddle至少應該讓你開始。下面是相關的JavaScript：

// Listen for change event on List1 
$("#List1").change(function (e) { 

    // Find the selected value from List1 
    var selectedValue = $(this).val(); 
    var $list2 = $("#List2"); 

    if (selectedValue == 'a' || selectedValue == 'd') { 

     // Reset disabled options for List2 
     $list2.find("option").removeAttr('disabled'); 

     // If you want to change the value of List2 back to some default... 
     //list2.val(''); 
    } 

    if (selectedValue == 'b' || selectedValue == 'c') { 

     // Select option 2 for List2 
     $list2.val('2'); 

     // Disable all other options 
     $list2.find("option:not(:selected)").attr('disabled', 'disabled'); 
    } 
});

一概而論，應添加類列表1的選項（如class="reset-other-list"或class="restrict-other-list"）。然後，而不是檢查特定的值，檢查是否選擇了與該class選項。如果將來價值發生變化，這將會導致更少的麻煩。

來源

2014-02-20 21:39:01 lebolo

非常感謝您幫助我們提供示例代碼。我會盡力讓你知道。 – Milacay

再次感謝@lebolo。我的下拉列表與我發佈的不完全相同，但是發佈它們太混亂，因爲它們有太多的選項和腳本來初始建立列表。我遵循你的代碼和邏輯，它完美的工作。 – Milacay

JQuery - Dropdownlists選擇依賴關係

回答

相關問題