根据所选选项过滤值

时间:2014-07-21 12:22:29

标签: jquery html drop-down-menu

我的HTML上有两个下拉列表。 我想根据选定的选项过滤值。 当用户单击第一个下拉列表的值时,必须更改另一个下拉列表的值。 我知道它很简单,是的,你说的很简单。 但我的选项是在我的SQL中,我填写了我的SQL下拉列表的选项值。 这是我的代码:

First DropDown List:

<select class="fieldDropdown" ng-model="formData.Land" name="select1" id="select1" ng-options="value.ls_ItemText as value.ls_ItemText for (key, value) in formLIST.lands">
</select>

第二个DropDown列表:

<select class="fieldDropdown" ng-model="formData.Phase"  name="select2" id="select2" ng-options="value.ls_ItemIndex as value.ls_ItemText for (key, value) in formLIST.phases>
</select>

我知道它适用于以下方法:

First DropDown:

<select name="select1" id="select1" ng-model="FormData.Lands" style="width: 206px; height: 27px;">
    <option value="0"> </option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

Second DropDown:

<select name="select2" id="select2" ng-model="FormData.Phases" style="width: 206px; height: 27px;">
    <option value="0"></option>
    <option value="1">A</option>
    <option value="1">AA</option>
    <option value="1">AAA</option>
    <option value="1">A</option>
    <option value="1">A</option>

    <option value="2">BBB</option>
    <option value="2">BBBB</option>
    <option value="2">BBBBBBB</option>
    <option value="2">B</option>

    <option value="3">CCCC</option>
    <option value="3">CC</option>

    <option value="4">DDD</option>

    <option value="5">E</option>
</select>

jQuery的:

$("#select1").change(function () {
    if ($(this).data('options') == undefined) {
        /*Taking an array of all options-2 and kind of embedding it on the select1*/
        $(this).data('options', $('#select2 option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html(options);
});

这是工作JSFiddle

但正如我所问,我想填写SQL中的值,除非直接输入HTML。

即使我可以填写以下代码:

<select class="fieldDropdown" ng-model="formData.Phase"  name="select2" id="select2" ng-options="value.ls_ItemIndex as value.ls_ItemText for (key, value) in formLIST.phases | filter:{ls_ItemValue:'4'}"></select>

但它只是让我回来了#34; D&#34;第二次下拉列表内的群组。但它不适合其他团体。

感谢。

1 个答案:

答案 0 :(得分:1)

将此用于JQuery:

   $("#select1").change(function () {
   $scope.currentID = $(this).val(); });

这适用于您的HTML:

<select class="fieldDropdown" ng-model="formData.Phase"  name="select2" id="select2" ng-options="value.ls_ItemIndex as value.ls_ItemText for (key, value) in formLIST.phases | filter:{ls_ItemValue: currentID}"></select>

现在它会起作用。