javascript - html + javascript：如何在某些条件下禁用下拉列表中的空选项

Question

我有十几个 dropdownlinst 的 html 页面

其中之一是

@Html.DropDownListFor(model => model.PrimaryNetworkInt, new SelectList(ViewBag.AvailableNetworks, "ID", "Name"), "Offline")

第二个存储一些其他值，当我将其更改为“AAA”时，我必须首先禁用选择 NULL 选项（即“离线”）的能力（如果选择了其他值，则将其返回）

选择逻辑工作正常：

$('#SecondDDList').change(function () { SecondDDListChanged(); });

var SecondDDListChanged() = function(){
    //...
    if ($('#SecondDDList').val()==-1){ //-1 i.e == "AAA" in my example
        //Here i need logic to disable NULL selection
    } else {
        //Here i need enable NULL option
    }
}

有什么更好的方法呢？可能是这样的：

$("#PrimaryNetworkInt option[value=null]").attr("disabled", "disabled");

有什么建议吗？

Answer 1

jQuery(function () {
    jQuery('#SecondDDList').find("option").each(function () {
        if (jQuery(this).val() == -1 || jQuery(this).val() == "null" ) {
            jQuery(this).attr("disabled", true);
        }
    });
});

Answer 2

您可以使用.show()和.hide( )方法确保用户可以（或不能）选择值

$("#PrimaryNetworkInt").change(function() {
    if ($(this).val()==-1){ //-1 i.e == "AAA" in my example
        $("#PrimaryNetworkInt option[value='null']").hide();
    } else {
        $("#PrimaryNetworkInt option[value='null']").show();
    }

});

Answer 3

要禁用特定选项，只需设置其disabled属性。

var SecondDDListChanged() = function(){
    //...
    if ($('#SecondDDList').val()==-1){ //-1 i.e == "AAA" in my example
        $("#optionId").attr("disabled", "disabled");
    } else {
        $("#optionId").removeAttr("disabled", "disabled");
    }
}