Question

所以这是我的HTML

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

和我的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);
  });
});

为什么在arr传递时grade()被视为变量？

Answer 1

将您的变量包装在一个对象中，然后使用括号表示法访问它们：

$(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 2

问题是PlayEncounter()是文字字符串$("#citizenType option:selected").val()或"value1"。因此，当您将其传递给"value2"函数时，它会调用grade()，它将返回0个元素，因此不执行任何操作。以下是如何更改代码以实现您正在寻找的结果：

＆＃13;

$("value1").each(...)

＆＃13;

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

＆＃13;

Answer 3

在这种情况下，您在回调函数内部，可以传递两个值。第一个是您正在使用的'i'值（这是数组中对象的索引），第二个是您当前正在操作的项的值，因此如果您想迭代每个值并且附加一个具有该值所需的值的选项：

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

以下是此部分JQuery API的文档链接：http://api.jquery.com/jquery.each/

将选择选项值转换为var

3 个答案: