[英]Remove item from dropdown list on page load (no jquery)
我有以下下拉列表:
<select name="DD1" id="DD1">
<option value="B">B</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="R">R</option>
</select>
在頁面加載時我需要隱藏/刪除選項D.我不能通過索引,因為該列表是動態的,所以我必須使用值參數或渲染的實際文本。
我已經嘗試找到答案,但我遇到的所有解決方案都使用JQuery,我沒有選擇這樣做。
任何人都有辦法隱藏選項D只是在頁面加載時使用Javascipt所以用戶永遠不會看到該選項?
謝謝
var select=document.getElementById('DD1');
for (i=0;i<select.length; i++) {
if (select.options[i].value=='D') {
select.remove(i);
}
}
我使用window.addEventListener
它不適用於不支持它的低級瀏覽器。 我建議創建自己的addEvent方法來抽象不一致 - 如果不允許jQuery(或其他一些框架)。
window.addEventListener("load", function(){
var list = document.getElementById('DD1'), el;
for(var i in list.children){
el = list.children[i];
if(el.hasOwnProperty('value')) {
if(el.value == 'D') {
el.style.display = 'none';
break;
}
}
}
}, false);
嘗試循環選項,檢查值,如果匹配,則將其設置為null:
function removeByValue(id, value) {
var select = document.getElementById(id);
for (var i=0, length = select.options.length; i< length; i++) {
if (select.options[i] && select.options[i].value === value) {
select.options[i] = null;
}
}
}
removeByValue('DD1', 'D');
var selectbox = document.getElementById('DD1');
for(var i = 0; i < selectbox.options.length; i++)
{
if(selectbox.options[i].value == 'D')
selectbox.remove(i);
}
由於其他人都提出了基本相同的解決方案,如果您只有針對現代瀏覽器的優勢,這里有一個更簡單的解決方案:
var el = document.querySelector('select[name=DD1] option[value=D]');
el.parentNode.removeChild(el);
或者,對於每個瀏覽器:
var el;
if(typeof document.querySelector == 'function') {
el = document.querySelector('select[name=DD1] option[value=D]');
} else {
for(var child in document.getElementById('DD1').childNodes) {
if(child.textContent == 'D') {
el = child;
break;
}
}
}
el && el.parentNode.removeChild(el);
可能有一些更清潔的方法來做到這一點,但我生銹與javascript。
var options = documentgetElementsByTagName("option");
for(i=0; i<options.length; i++)
{
if(options[i].value == "D")
{
this.class += "displayNone";
}
}
.displayNone{ display: none; }
這沒有經過測試,所以我不知道它是否會起作用。
你不需要這個。 只需兩行代碼即可。
var Node1 = document.getElementById("DD1");
Node1.removeChild(Node1.childNodes[1]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.