CODEWITHSUNDEEP
jqueryhtmldrop-down-menu
Mehran
Mehran

Reputation: 105

filtering values based on selected option

I have two Dropdowns on my HTML. I want filtering values based on selected option. When a user click on a value of first dropdown, the value of another dropdown must be change. I know its simple, and yes you right its simple. But my options are inside my sql and i fill the options value of both of my dropdown from SQL. This is my Code:

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>

Second DropDown List:

<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>

I know it works in below method:

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);
});

This is the Working JSFiddle

But as i asked, i want to fill the values from SQL except directing typing in HTML.

Even i can fill with below code:

<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>

but it just bring me back "D" groups inside second dropdown. but its not working for other groups.

Thanks.

Upvotes: 0

Views: 2462

Answers (1)

Mehran
Mehran

Reputation: 323

Use this for JQuery:

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

And this for your 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>

and now it will working.

Upvotes: 1

Related Questions