javascript - 将选择选项值转换为 var

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

问题是 $("#citizenType option:selected").val() 是文字字符串 "value1" 或 "value2"。因此，当您将它传递给 grade() 函数时，它会调用 $("value1").each(...) ，它将返回 0 个元素，因此执行没有什么。以下是您可以如何更改代码以获得您正在寻找的结果:

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