基于jquery中的值填充下拉列表

我有一个下拉列表，我想限制基于另一个下拉列表显示的选项。 这是html：

<select data-placeholder="Choose service…" class="chosen-single">
<option selected="selected" value="0"></option>
    <option value="1,cell">AirTouch</option>
    <option value="2,page">AirTouch Alpha Pager</option>
    <option value="3,cell">Ameritech</option>
    <option value="4,cell">Arch</option>
    <option value="5,cell">AT&amp;T Wireless</option>
    <option value="6,cell">Bell Atlantic Mobile</option>
    <option value="7,email">SMTP</option>
</select>

DeviceSelValue正确设置为1/2/3。 但是，无论选择了哪个设备选项，都会显示所有选项。 所选值将正确显示。 如何将列表设置为仅显示“单元格”/“电子邮件”/“页面”中的值

谢谢

更新 下面是我的就绪函数，后面是

bindevent

函数。

bindevent

函数在代码隐藏插入更改函数之后调用。但是

if

语句从来都不是真的

$(document).ready(function () {
//Configure the DropDownBox using the 'chosen' jquery plugin
$(".chosen-single").chosen({
    search_contains: true,
    width: "200px",
    no_results_text: "Sorry, no match!"
});
...several other functions that are used when in edit mode
});

//bind events after partial page postback
$(function () {
bindEvents();
});

//This change function is when the Device grid is in Insert Mode
function bindEvents() {
alert('start bind event');

    $(document).on("change", "[id*=recdevgvDDListDeviceNameInsert]", function () {
        $("[id*=recdevgvDDListServiceNameInsert]").prop("disabled", false);
        $("select:not(.chosen-select, .no-chosen)").chosen({
            search_contains: true,
            width: "200px",
            no_results_text: "Sorry, no match!"
        });
        var DeviceSelValue = $(this).val();
        alert('bind event - device change event on insert. Device value: ' + DeviceSelValue);
        $("[id*=recdevgvDDListServiceNameInsert]").val('');
        $("[id*=recdevgvDDListServiceNameInsert]").children("option").hide();
        $("[id*=recdevgvDDListServiceNameInsert]").trigger("chosen:updated");

        switch (DeviceSelValue) {
            case "1":
                $("[id*=recdevgvDDListServiceNameInsert] option[value*='cell']").show();
                $("[id*=recdevgvDDListServiceNameInsert]").trigger("chosen:updated");
                $("[id*=recdevgvAddressExtInsert]").hide();
                break;
            case "2":
                $("[id*=recdevgvDDListServiceNameInsert] option[value*='email']").show();
                $("[id*=recdevgvDDListServiceNameInsert]").trigger("chosen:updated");
                $("[id*=recdevgvAddressExtInsert]").hide();
                break;
            case "3":
                $("[id*=recdevgvDDListServiceNameInsert] option[value*='page']").show();
                $("[id*=recdevgvDDListServiceNameInsert]").trigger("chosen:updated");
                $("[id*=recdevgvAddressExtInsert]").hide();
                break;
            default:
                break;
        }
    });

    //If this control is enabled, reset the list so the correct values are shown.
    if ($("[id*=recdevgvDDListServiceNameInsert]").is(":disabled") == false) {
        alert('bind event - in if statement');
        var DeviceSelValue = $(this).parent().prev().find("option:selected").val();
        alert('disabled service insert - device select value: ' + DeviceSelValue);
        $(this).children("option").hide();
        $(this).trigger("chosen:updated");   
        switch (DeviceSelValue) {
            case "1":
                $("[id*=recdevgvDDListServiceNameInsert] option[value*='cell']").show();
                alert('html: ' + $(this).html());
                $("[id*=recdevgvDDListServiceNameInsert]").trigger("chosen:updated");
                $("#recdevgvAddressExtInsert").show();
                break;
            case "2":
                $("[id*=recdevgvDDListServiceNameInsert] option[value*='email']").show();
                alert('html: ' + $(this).html());
                $("[id*=recdevgvDDListServiceNameInsert]").trigger("chosen:updated");
                $("#recdevgvAddressExtInsert").hide();
                break;
            case "3":
                $("[id*=recdevgvDDListServiceNameInsert] option[value*='page']").show();
                alert('html: ' + $(this).html());
                $("[id*=recdevgvDDListServiceNameInsert]").trigger("chosen:updated");
                $("#recdevgvAddressExtInsert").show();
                break;
            default:
                break;
        }
    }
};

---

bind event函数在代码隐藏更改函数之后调用，但if

语句不是true。
我想保持简单：将目标下拉列表拆分为3个不同的下拉列表，映射目标行为。然后，您可以根据用户的选择显示目标下拉列表，并隐藏不必要的下拉列表（例如，包含要隐藏的选项的下拉列表）
我通过将
每个
函数添加到我的
bindEvents（）
函数来纠正我的问题。
我没有使用
if
语句，而是添加了
each
函数来触发服务名称列表的更新。
代码如下：

//bind events after partial page postback
$(function () {
    bindEvents();
});

function bindEvents() {
    //...other function calls like change events with other controls

    $("[id*=recdevgvDDListServiceNameInsert]").each(function () {
        if ($(this).is(":disabled") == false) {
            var DeviceSelValue = $(this).parent().prev().find("option:selected").val();
            UpdateServiceNameOptions(this, DeviceSelValue);
        }
    });  //end service name each function
};

我喜欢超级简单的解决方案，基本上，每次下拉列表发生变化时，我都会用.empty（）清除下拉列表，并且我会根据您需要的deviceSelValue逻辑添加所需的选项。我编写了这段简单的代码，我不确定您是否需要逻辑，但它显示了如何根据选择删除。。。我尝试了您的建议，替换了
$（“option[value*='page']”，this）.show（）带有
$（“.selected single option[value*='page']”）。show（）但列表没有限制。它显示了所有选项。此下拉列表位于嵌套gridview的插入行中。我想我必须以某种方式使用
这个
选择器，以便更新正确的下拉列表。我站在正确的位置。这确实正确地设置了选项，但我在代码中有一个事件在后面调用，它必须重置值，以便所有的值都可见。此函数需要在代码隐藏事件之后运行。这是如何实现的？代码隐藏上的事件是故意触发的还是页面加载？
//bind events after partial page postback
$(function () {
    bindEvents();
});

function bindEvents() {
    //...other function calls like change events with other controls

    $("[id*=recdevgvDDListServiceNameInsert]").each(function () {
        if ($(this).is(":disabled") == false) {
            var DeviceSelValue = $(this).parent().prev().find("option:selected").val();
            UpdateServiceNameOptions(this, DeviceSelValue);
        }
    });  //end service name each function
};