将 select 选项值转换为 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);
  });
});

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

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

问题是 $("#citizenType option:selected").val() 是文字字符串 "value1" 或 "value2"。因此，当您将它传递给 grade() 函数时，它会调用 $("value1").each(...)，这将 return 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>

Answer 3

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

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

这是 link JQuery API 这部分的文档：http://api.jquery.com/jquery.each/

将 select 选项值转换为 var

Convert select option value to var

javascript

html-select

var