Question

我有一个下拉列表，我想限制根据另一个下拉列表显示的选项。这是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>

当用户更改列表中的值时，这是jquery函数调用：

$(document).on("change", "[id*=recdevgvDDListServiceNameInsert]", function () {
 if ($(this).is(":disabled") == false) {
     var DeviceSelValue = $(this).parent().prev().find("option:selected").val();
     $(this).children("option").hide();
     $(this).trigger("chosen:updated");
     alert('value: ' + $('option:selected', this).attr('value'));
     switch (DeviceSelValue) {
         case "1":
             $("option[value*='cell']", this).show();
             $(this).trigger("chosen:updated");
             $("[id*=recdevgvAddressExtInsert]").show();
             break;
         case "2":                       
             $("option[value*='email']", this).show();
             $(this).trigger("chosen:updated");
             $("[id*=recdevgvAddressExtInsert]").hide();
             break;
         case "3":
             $("option[value*='page']", this).show();
             $(this).trigger("chosen:updated");
             $("[id*=recdevgvAddressExtInsert]").show();
             break;
         default:
             break;
     }
 }
});

DeviceSelValue正确设置为1/2/3。但无论选择何种设备选项，都会显示所有选项。正确显示所选值。如何将列表设置为仅显示“＆＃39; cell＆＃39; /＆＃39;电子邮件＆＃39; /＆＃39;页面＆＃39;。

感谢。

更新下面是我的ready函数，之后是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;
        }
    }
};

在代码隐藏更改函数之后调用绑定事件函数，但if语句不正确。

Answer 1

我会保持简单：将目标下拉列表分成3个不同的下拉列表，映射目标行为。然后，您可以根据用户的选择显示目标下拉列表，并隐藏不必要的下拉列表（例如包含您要隐藏的选项的那些）

Answer 2

我通过将each函数添加到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
};

根据jquery中的值填充下拉列表

2 个答案: