2013-07-22 61 views
2

上选择的选项,我需要你的帮助,删除从一个选择框使用“删除”键键盘

我是比较新的javascript和需要一个专家/高级编码器的帮助。

如何从选择框中删除突出显示/选定的值,因此一旦选择完成并点击我的键盘上的'删除'键,将会运行一个javascript函数并从中删除选定的选项selectbox

这里是我的html:

<!DOCTYPE html>  
<html>  
<head>  
</head>  
<body> 
<select style="width: 250px;" id="list"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
</body>  
</html> 

回答

3

您将一个事件处理程序的onkeydown,你的删除键检查,你得到的电流值,你会发现用该值的选项,您删除的选项。 http://jsfiddle.net/KgPBr/2/

$("#list").keydown(function(event) { 
    if(event.which != 46) // not delete key 
     return; 
    var sel = $(this); 
    var val = sel.val(); 
    if(val != "") 
     sel.find("option[value="+val+"]").remove(); 
}); 

编辑这里的JavaScript版本,它可能是与所有的浏览器比jQuery的版本兼容少平原。 http://jsfiddle.net/9cwyx/

document.getElementById("list").onkeydown = function(e) { 
    var evt = e ? e : event; 
    var sel = evt.target ? evt.target : evt.srcElement; 
    if(evt.keyCode && evt.keyCode == 46 || evt.which == 46) { 
    var val = sel.value; 
    var opts = sel.getElementsByTagName("option"); 
    if(val != "") { 
     for(var i=0; i<opts.length; i++) { 
      if(val == opts[i].value) 
       sel.removeChild(opts[i]); 
     } 
    } 
    } 
}; 
+0

问题不是标记与jQuery – bugwheels94

+0

看起来像是用某种库的帮助工作。是否只有一个纯JavaScript的方式来删除它? –

+0

@Ankit - jQuery是一个基于JavaScript的便利库,它是JavaScript的基础。 –

-1

您可以使用下面的代码来做到这一点。我用​​事件监听器。

document.getElementById('list').addEventListener('keydown', deleteIt, false); 

function deleteIt(event) { 
    if (event.which == 46) { //keyCode of DEL is 46 
     var e = document.getElementById("list"); 
     for (i = 0; i < e.length; i++) { 
      e.remove(i); //Used to delete the option 
     } 
    } 
} 

入住这Updated JSFiddle

+0

请分享downvote的原因,以便我可以从我的错误中学习? – Praveen