2014-07-21 3 views
0

J'ai deux listes déroulantes sur mon HTML. Je veux des valeurs de filtrage basées sur l'option sélectionnée. Lorsqu'un utilisateur clique sur une valeur de la première liste déroulante, la valeur d'une autre liste déroulante doit être modifiée. Je sais que c'est simple, et oui vous avez raison, c'est simple. Mais mes options sont à l'intérieur de mon SQL et je remplis la valeur des options de mes deux listes déroulantes de SQL. Ceci est mon code:valeurs de filtrage basées sur l'option sélectionnée

Première DropDown Liste:

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

Deuxième DropDown Liste:

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

Je sais que cela fonctionne en dessous de la méthode:

Première 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> 

Deuxième 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); 
}); 

Ceci est le travail JSFiddle

Mais comme je l'ai demandé, je veux remplir les valeurs de SQL, sauf diriger en tapant HTML.

Même je peux remplir avec le code ci-dessous:

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

mais il me ramener des groupes "D" dans la deuxième liste déroulante. mais cela ne fonctionne pas pour d'autres groupes.

Merci.

+0

Vous utilisez 'filter: {ls_ItemValue: '4'}' ???? Donc, son filtrage. Vous utilisez angularjs alors pensez comme angularjs – Satpal

+0

Non, c'est juste un exemple. Je veux catégoriser tout. Lorsque je clique sur la valeur "A" dans la première liste déroulante, il apporte pour moi les valeurs du groupe "A" dans la deuxième liste déroulante. ce filtre: {ls_ItemValue: '4'} apportez juste pour moi le numéro de catégorie 4 – Mehran

+0

en angulaire vous devez changer le prédicat de filtre d'une valeur de chaîne à une variable de portée – charlietfl

Répondre

1

Utilisez ce pour JQuery:

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

Et ceci pour votre 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> 

et maintenant il travaille.

+0

Merci mon nom Mate. fonctionne correctement. – Mehran

Questions connexes