Question

我有2个下拉框，允许用户选择他们的年龄和性别。这些下拉框从我的数据库（PHP 5.5+ MYSQL）中绘制他们的值，并使用检索到的值作为显示给用户的默认值。

Dropbox的其他选项是通过在pageload上运行的函数生成的。

功能是：

function AgeDropDown(){
    var list= document.getElementById("Age");
    for(var i=1;i<100;i++)
    {
        var opt = document.createElement("option");
        opt.value= i;
        opt.textContent=i;
        list.appendChild(opt);
    }

}

function genderlist(){
    var list= document.getElementById("Gender");
    var choices=["M","F"];
    for(i=0;i<choices.length;i++)
    {
        var opt = document.createElement("option");
        opt.value= choices[i];
        opt.textContent=choices[i];
        list.appendChild(opt);
    }
}

虽然我的代码完美无缺，但所有选项都显示出来，每当我点击保管箱更改值时，当前值会另外显示生成的选项。

E.g

年龄

18   
1
2
3    <---- Values shown in the select dropdown
4
5
6

性别

M
M
F

如何在单击下拉框时从显示的选项中删除默认值？

E.g（我希望发生什么，而不是上面显示的内容。）

年龄

性别

M
F

Answer 1

你所要做的就是清空div。您可以将innerHTML设置为空字符串以清空div。

注意：

你要做的就是在你的div中添加/追加元素。所以你必须清除div（删除它的孩子）。

代码应为list.innerHTML = "";

完整的代码应如下所示：

function AgeDropDown(){ var list= document.getElementById("Age"); list.innerHTML = ""; for(var i=1;i<100;i++) { var opt = document.createElement("option"); opt.value= i; opt.textContent=i; list.appendChild(opt); } } function genderlist(){ var list= document.getElementById("Gender"); list.innerHTML = ""; var choices=["M","F"]; for(i=0;i<choices.length;i++) { var opt = document.createElement("option"); opt.value= choices[i]; opt.textContent=choices[i]; list.appendChild(opt); } }

Answer 2

您可以使用jQuery删除列表的第一个元素：

$('#Gender').find('option').first().remove();

或者：

$('#Age').find('option').first().remove();

从<select>下拉列表中删除当前值</select>

2 个答案: