Javascript：根據另一個下拉列表從下拉列表中刪除不同的選項標籤？

Question

是的，標題是一團糟。

下面是我想要做的： 我有一個主要的下拉列表，我可以選擇兩種選擇。 Option1和Option2。如果選擇了Option1，我不希望發生任何事情。如果選擇Option2，我想從另一個下拉列表中刪除一個選項標籤。

<select name="main_dropdown"> 
    <option value="Option1">Option 1</option> 
    <option value="Option2">Option 2</option> 
</select> 

<select name="secondary_dropdown"> 
    <option value="Option1">Option 1</option> 
    <option value="Option2">Option 2</option> // Let's say i want to remove this option tag if Option2 in main_dropdown is selected. 
    <option value="Option2">Option 2</option> 
</select> 

謝謝！

Answer 1

我想你會得到更好的響應和更多的關注，如果你的問題包括代碼演示自己的努力來尋找答案，而不是要求別人寫你所需要的代碼。不僅僅是因爲人們不想讓自己從事自由工作，而且也變得更加難以回答。

例如，即使你想要做的是非常基本的JavaScript，有幾十種不同的方式可以解決它。這裏是你的問題（使用jQuery）的快速工作答案：

<script> 
    $(document).ready(function(){ 
    $('select[name=main_dropdown]').bind('change',function(){ 
     if($(this).val() == 'Option2') $('select[name=secondary_dropdown] option[value=Option2]').remove(); 
    }); 
    }); 
</script> 

<select name="main_dropdown"> 
    <option value="Option1">Option 1</option> 
    <option value="Option2">Option 2</option> 
</select> 

<select name="secondary_dropdown"> 
    <option value="Option1">Option 1</option> 
    <option value="Option2">Option 2</option> // Let's say i want to remove this option tag if Option2 in main_dropdown is selected. 
    <option value="Option2">Option 2</option> 
</select> 

See it in action.

這就是說，該解決方案是非常脆。在這種情況下，它會做，但如果你的關係發生變化，或者代碼變得更復雜等，那麼它不是一個很好的解決方案。如果沒有示例代碼，就不可能告訴你用什麼標準來定位目標選項和刪除它們，所以你不可能做到很好。

我建議先從jQuery庫，它有一些偉大的Tutorials。如果你給它一個鏡頭，你應該能夠很快解決你自己的問題。如果你的代碼最終失效，你不知道該怎麼轉，不要害怕 - 我相信這裏的人會很樂意幫助你。

Answer 2

<option value="Option2" id="ToBeOrNotToBe">Option 2</option> 

如果 'main_dropdown' 的值是 「選項2」（做比較），使用從.removeChild 「secondary_dropdown」 除去的document.getElementById（ 「ToBeOrNotToBe」）（）。我建議給你所有的選擇一個唯一的ID以及名稱，這樣你就可以使用document.getElementById（）來獲取你的元素，然後使用.removeChild（）來操作所有的東西。您將傳遞給removeChild（）的參數將是您的選項2。但是，removeChild（）返回它刪除的對象，因此將它存儲到另一個變量中，所以如果用戶通過主下拉改變主意，appendChild（）將刪除的option2作爲子節點返回到「secondary_dropdown」。

另外，在我看來，第一構造的主要下拉，並且一旦它們已經選擇了一個值，然後構造使用的appendChild（）插入到文檔本身第二個下拉。如果你看，http://www.w3schools.com/tags/tag_option.asp顯示你可以附加到選項的事件監聽器，所以一旦選擇了一個選項，插入第一個下拉第二個下拉，並相應地構建它。

如果你只是想要一個快速和簡單的解決方案，使用事件偵聽器激活時選擇主下拉菜單的一個選項，然後刪除選項2或追加也相應地。