Convertir sélectionner la valeur option var

Question

Alors, voici mon html

<select class="form-control" id="citizenType"> 
    <option value="value1">value1</option> 
    <option value="value2">value2</option> 
</select> 

et mon JS

$(document).ready(function() { 
    var value1 = new Array("1","2","3"); 
    var value2 = new Array("4","5","6"); 
    function grade(arr) { 
    $(arr).each(function(i) { 
     $("#grade").append("<option>" + arr[i].value + "</option>"); 
    }); 
    }; 

    $("#citizenType").change(function() { 
    var select = $("#citizenType option:selected").val(); 
    grade(select); 
    }); 
}); 

Pourquoi ne pas arr considéré comme une variable lorsque passesd à grade()?

Answer 1

Le problème est que $("#citizenType option:selected").val() est la chaîne littérale "value1" ou "value2". Donc, quand vous le passez dans la fonction grade(), il appelle $("value1").each(...) qui renverra 0 éléments et ne fera donc rien. Voici comment vous pouvez modifier votre code pour obtenir le résultat que vous recherchez:

$(document).ready(function() { 
 
    var data = { 
 
    value1: new Array("1", "2", "3"), 
 
    value2: new Array("4", "5", "6") 
 
    }; 
 

 
    function grade(arr) { 
 
    $("#grade").empty(); // empty the options list before appending new options 
 
    $.each(arr, function(index, elem) { 
 
     $("#grade").append("<option>" + elem + "</option>"); 
 
    }); 
 
    }; 
 
    $("#citizenType").change(function() { 
 
    var select = $("#citizenType option:selected").val(); 
 
    grade(data[select]); // access data[selectedValue] to grab the correct array 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control" id="citizenType"> 
 
    <option value="value1">value1</option> 
 
    <option value="value2">value2</option> 
 
</select> 
 

 
<select id="grade"></select>

Answer 2

envelopper votre vars dans un objet et un accès puis en utilisant la notation de support comme ceci:

$(document).ready(function() { 
    var varWrapper = { 
    "value1": new Array("1","2","3"), // accessed using varWrapper["value1"] 
    "value2": new Array("4","5","6") // accessed using varWrapper["value2"] 
    // ... 
    }; 
    function grade(arr) { 
    // you may consider emptying #grade first using $("#grade").empty() 
    // $.each is better for looping arrays and objects 
    $.each(arr, function(i, value) { 
     $("#grade").append("<option>" + value + "</option>"); 
    }); 
    }; 
    $("#citizenType").change(function() { 
    var select = $("#citizenType option:selected").val(); 
     grade(varWrapper[select]); // access the according variable from varWrapper 
    }); 
}); 

Answer 3

Dans ce cas, vous êtes à l'intérieur de la fonction de rappel qui peut être des valeurs passedtwo. Le premier est la valeur 'i' que vous utilisez (c'est l'index de l'objet dans le tableau) et le second est la valeur de l'élément que vous utilisez actuellement, donc si vous voulez parcourir chaque valeur et ajouter une option à cette valeur que vous devez faire quelque chose comme ceci:

$(arr).each(function(i, value) { 
     $("#grade").append("<option>" + value + "</option>"); 
    }); 

Voici un lien vers le DOC pour cette partie de l'API JQuery: http://api.jquery.com/jquery.each/