Javascript 取消选中复选框事件时从HTML下拉列表中删除项目
我有一个复选框列表和一个下拉列表。当我选中复选框时,我设法将元素动态添加到下拉列表中 当我取消选中特定复选框时,如何从下拉列表中动态删除相应的项 这是我的密码Javascript 取消选中复选框事件时从HTML下拉列表中删除项目,javascript,html,jsp,Javascript,Html,Jsp,我有一个复选框列表和一个下拉列表。当我选中复选框时,我设法将元素动态添加到下拉列表中 当我取消选中特定复选框时,如何从下拉列表中动态删除相应的项 这是我的密码 //<input type="checkbox" name="docCkBox" value="${document.documentName}" onclick="handleChange(this)"/> // check box onclick event will call this function funct
//<input type="checkbox" name="docCkBox" value="${document.documentName}" onclick="handleChange(this)"/>
// check box onclick event will call this function
function handleChange(cb) {
if (cb.checked)
{
// Create an Option object
var opt = document.createElement("option");
// Add an Option object to Drop Down/List Box
document.getElementById("query_doc").options.add(opt);
// Assign text and value to Option object
opt.text = cb.value;
opt.value = cb.value;
}
else{
//I want to remove a particuler Item when I uncheck the check-box
//by below method it will always remove the first element of the dropdown but not the corresponding element
var opt = document.createElement("option");
opt.text = cb.value;
opt.value = cb.value;
document.getElementById("query_doc").remove(opt);
}
}
//
//复选框onclick事件将调用此函数
功能手柄更换(cb){
如果(cb.选中)
{
//创建选项对象
var opt=document.createElement(“选项”);
//将选项对象添加到下拉列表框
document.getElementById(“查询文档”).options.add(opt);
//为选项对象指定文本和值
opt.text=cb.value;
opt.value=cb.value;
}
否则{
//当我取消选中复选框时,我想删除一个特殊项目
//通过下面的方法,它将始终删除下拉列表的第一个元素,但不删除相应的元素
var opt=document.createElement(“选项”);
opt.text=cb.value;
opt.value=cb.value;
document.getElementById(“查询文档”).remove(opt);
}
}
您必须找到所需选项的索引,并按索引将其删除。您需要访问已在选择标记中的选项,而不是创建新的选项。为此,我会获取所有选项,然后检查每个选项,看它是否具有复选框的值。在else块中,代码看起来像这样:
var opts = document.getElementById("query_doc").getElementsByTagName('option');
for(var i = 0; i < opts.length; i++){
if(opts[i].value == cb.value){
opts[i].parentNode.removeChild(opts[i]);
}
}
var opts=document.getElementById(“查询文档”).getElementsByTagName(“选项”);
对于(变量i=0;i
我还没有测试代码,但总体思路是这样的