JS保持同步選擇（沒有jquery）

我有一個頁面上的兩個SELECT元素，我需要做的是如果第一個被更改，第二個包含所有的選項，除了第一個目前選在第一位。JS保持同步選擇（沒有jquery）

他們從相同的選項開始，我可以禁用第二個，直到第一個被選中，如果需要的話。所以，如果我有：

... 
<select id="selectOne" onchange="someFuntion()"> 
    <option value="1">One</> 
    <option value="2">Two</> 
    <option value="3">Three</> 
</select> 

<select id="selectOne" onchange="someFuntion()"> 
    <option value="1">One</> 
    <option value="2">Two</> 
    <option value="3">Three</> 
</select> 
...

...並且在第一個中選擇了兩個，那麼它應該從第二個中刪除。然後，如果第一個選擇了三，第二個應該在第一個（包括兩個）列出除三之外的所有東西。第一個選項永遠不會改變，第二個選項除了當前選定的選項外，應該總是包含第一個選項。關於如何最好地完成這樣的事情的任何想法？

我不能把JQuery帶入這個混合，所以請不要Jquery特定的答案。除此之外，幾乎任何東西都是開放的。我可以從第二個選項中選擇初始值，但不知道如何處理從那裏的更改。

TIA！

來源

2016-06-07 D Durham

你嘗試過什麼？本網站上有很多類似的問題 – charlietfl

當您更改'selectOne'時，循環選擇'selectTwo'中的選項。如果選項值與'selectOne'的值相同，則設置'disabled'屬性，否則刪除屬性。 – Barmar

@Barmar - 我已經說過我有那部分工作 –

如果禁用selectTwo中的選項是好的，那麼可以這樣做。如果沒有，您可以用display：none類「隱藏」匹配選項，並使用classList.add和classList.remove來隱藏和顯示而不是禁用和啓用。

這裏隱藏和禁用方法都會導致刪除的項目是selectTwo中當前選擇的項目的可能性。在這種情況下，這兩種策略都不是很好。如果您必須避免它，您可以將selectTwo的值設置爲「好」，或者刪除selectTwo的子項並克隆selectOne的未選擇子項並將其添加到selectTwo。

如果你想要一個刪除/克隆策略的例子，讓我知道，我會張貼。

function selectClick(event) { 
 
    var that = document.querySelector("#selectTwo"); 
 
    var thatOptions = that.querySelectorAll("option"); 
 

 
    for (var i = 0; i < thatOptions.length; i++) { 
 
    thatOptions[i].disabled = (thatOptions[i].value === this.value); 
 
    } 
 
} 
 

 
document.querySelector("#selectOne").addEventListener("change", selectClick);

<select id="selectOne"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select> 
 

 
<select id="selectTwo"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select>

來源

2016-06-07 01:02:05 JonSG

querySelectorAll（「選項」）是我需要的一塊 - 謝謝！ –

JS保持同步選擇（沒有jquery）

回答

相關問題