我得到了以下兩個dropdown列表，我想刪除其中任一選項。因此，如果選擇選項1，它將不在列表2中。普通JavaScript刪除項目從下拉列表中選擇

<select class='form-dropdown' name='first' id='first'> 
    <option value='none' selected>No Choice</option> 
    <option value='Workshop 1'> Workshop 1 </option> 
    <option value='Workshop 2'> Workshop 2 </option> 
    <option value='Workshop 3'> Workshop 3 </option> 
    <option value='Workshop 4'> Workshop 4 </option> 
    <option value='Workshop 5'> Workshop 5 </option> 
</select> 

<select class='form-dropdown' name='second' id='second'> 
    <option value='none' selected>No Choice</option> 
    <option value='Workshop 1'> Workshop 1 </option> 
    <option value='Workshop 2'> Workshop 2 </option> 
    <option value='Workshop 3'> Workshop 3 </option> 
    <option value='Workshop 4'> Workshop 4 </option> 
    <option value='Workshop 5'> Workshop 5 </option> 
</select>

這在普通的舊JavaScript中如何實現？

編輯：

的錯誤Uncaught TypeError: Cannot read property 'addEventListener' of null是由在window.onload加載事件監聽（）解決，見下文

window.onload = function() { 
    document.getElementById("first").addEventListener("change", function() { 
     show_all("second"); 
     document.querySelector("#second option[value='"+this.value+"']").style.display="none"; 
    }); 


    document.getElementById("second").addEventListener("change", function() { 
     show_all("first"); 
     document.querySelector("#first option[value='"+this.value+"']").style.display="none"; 
    }); 

}; 

function show_all(select_name){ 
    var second_options = document.querySelectorAll("#"+select_name+" option"); 

    for(var i=0;i<second_options.length;i++){ 
     second_options[i].style.display="block"; 
    } 
}

來源

2016-03-26 Sven Bamberger

豈不是更好地先用值來填充第二個下拉，每第一個值改變的時間？ –

https://jsfiddle.net/xh3qb8r6/ – adeneo

我的問題是，我的表單有三個這樣的列表不能用於像Zer00ne這樣的代碼，所以我認爲這是因爲JQuery的東西。這也是爲什麼我想要一個普通的JavaScript解決方案。 –

你可以改變事件添加到第一select然後隱藏選項在第二個列表中具有與當前選定的值相同的值，並且您可以添加另一個名爲show_all()的函數，以在隱藏所選選項之前顯示所有選項：

function show_all(){ 
 
    var second_options = document.querySelectorAll("#second option"); 
 
    for(var i=0;i<second_options.length;i++){ 
 
    second_options[i].style.display="block"; 
 
    } 
 
    document.getElementById("second").value='none'; 
 
} 
 

 
document.getElementById("first").addEventListener("change", function() { 
 
    show_all(); 
 

 
    document.querySelector("#second option[value='"+this.value+"']").style.display="none"; 
 
});

<select class='form-dropdown' name='first' id='first'> 
 
    <option value='none' selected>No Choice</option> 
 
    <option value='Workshop 1'> Workshop 1 </option> 
 
    <option value='Workshop 2'> Workshop 2 </option> 
 
    <option value='Workshop 3'> Workshop 3 </option> 
 
    <option value='Workshop 4'> Workshop 4 </option> 
 
    <option value='Workshop 5'> Workshop 5 </option> 
 
</select> 
 

 
<select class='form-dropdown' name='second' id='second'> 
 
    <option value='none' selected>No Choice</option> 
 
    <option value='Workshop 1'> Workshop 1 </option> 
 
    <option value='Workshop 2'> Workshop 2 </option> 
 
    <option value='Workshop 3'> Workshop 3 </option> 
 
    <option value='Workshop 4'> Workshop 4 </option> 
 
    <option value='Workshop 5'> Workshop 5 </option> 
 
</select>

如果你想避免在這兩個列表中重複的選擇，你可以使用：

function show_all(select_name){ 
 
    var second_options = document.querySelectorAll("#"+select_name+" option"); 
 
    
 
    for(var i=0;i<second_options.length;i++){ 
 
    second_options[i].style.display="block"; 
 
    } 
 
} 
 

 
document.getElementById("first").addEventListener("change", function() { 
 
    show_all("second"); 
 
    document.querySelector("#second option[value='"+this.value+"']").style.display="none"; 
 
}) 
 

 
document.getElementById("second").addEventListener("change", function() { 
 
    show_all("first"); 
 
    document.querySelector("#first option[value='"+this.value+"']").style.display="none"; 
 
})

<select class='form-dropdown' name='first' id='first'> 
 
    <option value='none' selected>No Choice</option> 
 
    <option value='Workshop 1'> Workshop 1 </option> 
 
    <option value='Workshop 2'> Workshop 2 </option> 
 
    <option value='Workshop 3'> Workshop 3 </option> 
 
    <option value='Workshop 4'> Workshop 4 </option> 
 
    <option value='Workshop 5'> Workshop 5 </option> 
 
</select> 
 

 
<select class='form-dropdown' name='second' id='second'> 
 
    <option value='none' selected>No Choice</option> 
 
    <option value='Workshop 1'> Workshop 1 </option> 
 
    <option value='Workshop 2'> Workshop 2 </option> 
 
    <option value='Workshop 3'> Workshop 3 </option> 
 
    <option value='Workshop 4'> Workshop 4 </option> 
 
    <option value='Workshop 5'> Workshop 5 </option> 
 
</select>

來源

2016-03-26 10:20:03

假設這不僅僅是對高級代表用戶回答應該關閉的問題的反應，因爲它缺乏任何努力......我建議這可能是因爲在這種情況下您可以達到無效狀態：如果用戶在選擇第一組之前從第二組中選擇，然後可以選擇相同的值兩次（因爲隱藏選項不會取消選擇它們）。 – Emissary

@ ZakariaAcharki如果我嘗試你的第二個代碼，我得到未捕獲TypeError：無法設置屬性'onchange'null –

這意味着它不能找到一個ID選擇'第一'或'第二'只是確保你有那些IDS。 –

您應該使用change事件監聽器第一個下拉列表，檢查它的值，並刪除它

document.getElementById("first").addEventListener("change", event=> { 
    if (event.target.value === "none") return 

    document.querySelector(`#second [value="${event.target.value}"]`).remove() 
})

見演示上JS Bin：從具有相同值的第二下拉元件。

來源

2016-03-26 10:22:58

只要看看這段代碼，對我工作的罰款

<html> 
<select class='form-dropdown' name='first' id='first' onchange="fun1(this.value)"> 
    <option value='none' selected>No Choice</option> 
    <option value='Workshop 1'> Workshop 1 </option> 
    <option value='Workshop 2'> Workshop 2 </option> 
    <option value='Workshop 3'> Workshop 3 </option> 
    <option value='Workshop 4'> Workshop 4 </option> 
    <option value='Workshop 5'> Workshop 5 </option> 
</select> 

<select class='form-dropdown' name='second' id='second' onchange="fun2(this.value)"> 
    <option value='none' selected>No Choice</option> 
    <option value='Workshop 1'> Workshop 1 </option> 
    <option value='Workshop 2'> Workshop 2 </option> 
    <option value='Workshop 3'> Workshop 3 </option> 
    <option value='Workshop 4'> Workshop 4 </option> 
    <option value='Workshop 5'> Workshop 5 </option> 
</select></html> 

<script> 

function fun1(val){ 
    updateFun2(val) 
} 

function fun2(val){ 
    updateFun1(val) 
} 

function updateFun2(val){ 
    selectobject=document.getElementById('second'); 
    for (var i=0; i<selectobject.length; i++){ 
     if (selectobject.options[i].value == val) 
     selectobject.remove(i); 
     } 
} 

function updateFun1(val){ 
    selectobject=document.getElementById('first'); 
    for (var i=0; i<selectobject.length; i++){ 
     if (selectobject.options[i].value == val) 
     selectobject.remove(i); 
     } 
} 

</script>

來源

2016-03-26 10:27:40 shreyansh

@ZakariaAcharki這就是我也經歷過的，所以我刪除了支票。首先我認爲這會起作用。 –

HTML代碼： -

<select class='form-dropdown' name='first' id='first'> 
<option value='none' selected>No Choice</option> 
<option value='Workshop 1'> Workshop 1 </option> 
<option value='Workshop 2'> Workshop 2 </option> 
<option value='Workshop 3'> Workshop 3 </option> 
<option value='Workshop 4'> Workshop 4 </option> 
<option value='Workshop 5'> Workshop 5 </option> 
</select> 

<select class='form-dropdown' name='second' id='second'> 
    <option value='none' selected>No Choice</option> 
    <option value='Workshop 1'> Workshop 1 </option> 
    <option value='Workshop 2'> Workshop 2 </option> 
    <option value='Workshop 3'> Workshop 3 </option> 
    <option value='Workshop 4'> Workshop 4 </option> 
    <option value='Workshop 5'> Workshop 5 </option> 
</select>

的JavaScript代碼： -

var first = document.getElementById('first'); 
var second = document.getElementById('second'); 
var optionOld = document.createElement("option"); 

first.addEventListener('change', function() { 
    var option = second.querySelector('option[value="' + this.value + '"]'); 
    if(optionOld.text != '') 
    { 
     second.add(optionOld); 
     } 
      optionOld = option; 
      second.removeChild(option); 
});

我已經改變了一些代碼在adeneo JSfiddler。

請檢查它是否適用於我的環境。

也覺得提琴手https://jsfiddle.net/xh3qb8r6/1/

感謝。

來源

2016-03-26 10:35:17

更新

我意識到，只是用指數並沒有因爲#second正確的工作會減少長，它的指數會隨之改變。因此，我添加了for循環以循環訪問#second，並且在匹配#first和#second選項之間的值時，索引用於定位匹配選項，然後將其刪除。

change

...
獲得選擇的#first<option>的索引。
店指數var和...
使用.remove(index)目標#second

var first = document.getElementById('first'); 
 

 

 
first.addEventListener('change', function(e) { 
 
    var second = document.getElementById('second'); 
 
    var selected = this.options[this.selectedIndex].value; 
 
    for (var i=0; i<second.length; i++){ 
 
    if (second.options[i].value == selected) 
 
    second.remove(i); 
 
    } 
 
}, false);

<select class='form-dropdown' name='first' id='first'> 
 
    <option value='none' selected>No Choice</option> 
 
    <option value='Workshop 1'>Workshop 1</option> 
 
    <option value='Workshop 2'>Workshop 2</option> 
 
    <option value='Workshop 3'>Workshop 3</option> 
 
    <option value='Workshop 4'>Workshop 4</option> 
 
    <option value='Workshop 5'>Workshop 5</option> 
 
</select> 
 

 
<select class='form-dropdown' name='second' id='second'> 
 
    <option value='none' selected>No Choice</option> 
 
    <option value='Workshop 1'>Workshop 1</option> 
 
    <option value='Workshop 2'>Workshop 2</option> 
 
    <option value='Workshop 3'>Workshop 3</option> 
 
    <option value='Workshop 4'>Workshop 4</option> 
 
    <option value='Workshop 5'>Workshop 5</option> 
 
</select>

來源

2016-03-26 10:41:23 zer00ne

普通JavaScript刪除項目從下拉列表中選擇

回答

更新

相關問題