如果没有元素，如何禁用下拉菜单

Question

我正在开发一个项目，我想在没有添加任何元素的情况下禁用下拉菜单（在添加一些选项后它将变为活动状态）就像在这个例子中，下拉列表是空的但它仍然有效（我可以点击它）。 我想禁用该属性。

小提琴的例子是： http ： //jsfiddle.net/7aqZm/

function myFunction()
{
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option);
}

Answer 1

使用jQuery，你可以这样做：

if ($("option#mySelect").length === 0) {
    $("#mySelect").css('display', 'none'); 
    // this hides the select if it's empty
    // if you want to disable, comment the previous line 
    // and uncomment the next one
    // $("#mySelect").prop('disabled', 'disabled');
}

您还可以在$（＃mySelect）中查找子项。 您可以使用相反的功能（从禁用选择开始并通过jquery启用它）：

$("#mySelect").css('display', 'block') // or 'inline' or...
$("#mySelect").prop('disabled', false); // for enabling

记得在必要时打电话。

Answer 2

您可以从设置元素的disabled属性开始。 添加新元素后，可以删除已禁用的属性。

所以：

<select id="mySelect" size="8" disabled="disabled"></select>

和javascript：

function myFunction()
{
    var x = document.getElementById("mySelect");
    x.disabled = false;

    var option = document.createElement("option");
    option.text = "Kiwi";
    x.add(option);
}

只是为了奖励，您还可以使用：empty伪选择器设置select元素的样式（注意您必须删除open和close标记之间的所有内容，包括空格）

CSS：

#mySelect:empty {
    background-color: red;
}

Answer 3

检查这个http://jsfiddle.net/286qL/

将disable值设置为true，并在添加内容时将其删除。

document.getElementById("mySelect").setAttribute('disabled', true);
function myFunction()
{   document.getElementById("mySelect").removeAttribute('disabled');
    var x = document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = "Kiwi";
    x.add(option);
}