将选择选项值转换为 var答案

【问题标题】：Convert select option value to var将选择选项值转换为 var
【发布时间】：2017-04-14 21:10:38
【问题描述】：

这是我的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 不被视为变量？

【问题讨论】：

我在这里可能是错的，但“选择”不是 javascript 关键字吗？如果是这样，你不能用它作为你的变量名编辑：好的，mb

标签： javascript html-select var

【解决方案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>

【讨论】：

感谢您的帮助！ :)

【解决方案2】：

将变量包装在一个对象中，然后使用括号符号访问它们，如下所示：

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

【讨论】：

感谢您的帮助！ :)

【解决方案3】：

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

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

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

【讨论】：