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

Question

是的，標題很亂。

這是我要執行的操作：我有一個主要的下拉列表，可以在其中選擇兩個選項。 選項1和選項2。 如果選擇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>

看到它在行動。

也就是說，該解決方案非常脆弱。 在這種情況下 ，它會做您想要的事情 ，但是如果您的關系發生變化，或者代碼變得更加復雜等，這不是一個很好的解決方案。沒有示例代碼，就無法確定您要使用哪些標准來定位選項並刪除它們，因此不可能為您帶來很多好處。

我建議從jQuery庫開始，該庫具有一些很棒的Tutorials 。 如果您試一試，您應該能夠很快自己解決類似的問題。 如果您的代碼最終無法正常工作，並且您不知道該去哪里，請不要擔心-我相信這里的人會很樂意為您提供幫助。

Answer 2

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

如果'main_dropdown'的值為“ Option2”（進行比較），則使用.removeChild（）從“ secondary_dropdown”中刪除document.getElementById（“ ToBeOrNotToBe”）。 我建議給所有選擇的對象一個唯一的ID和名稱，以便您可以使用document.getElementById（）獲取元素，然后使用.removeChild（）操作所有內容。 您要傳遞給removeChild（）的參數將是您的option2。

但是，removeChild（）返回它刪除的對象，因此將其存儲到另一個變量中，因此，如果用戶改變主意，則將已刪除的option2作為子對象添加到“ secondary_dropdown”作為子項。

另外，我認為，首先構造主下拉列表，一旦他們選擇了一個值，然后使用appendChild（）將第二個下拉列表構造到文檔本身中。 如果您看過， http://www.w3schools.com/tags/tag_option.asp會顯示您可以附加到選項的事件偵聽器，因此一旦選擇了選項，請在第一個下拉菜單下方插入第二個下拉菜單，並進行相應的構造。

如果只想提供快速簡單的解決方案，請在選擇主下拉菜單中的選項時使用事件偵聽器激活，然后相應地刪除option2或將其附加。