我有在更改事件上触发的JavaScript函数。第一步是检查用户选择哪个值。接下来是找到将填充到另一个选择菜单的匹配选项集。这是我的代码示例:



$("#type").on("change", function() {
  var typeVal = $(this).val();

  var approved = [{
    id: 1,
    text: "Month"
  }, {
    id: 2,
    text: "Week"
  }];
  var active = [{
    id: 1,
    text: "Progress"
  }, {
    id: 2,
    text: "No Feedback"
  }, {
    id: 3,
    text: "Office Closed"
  }];
  var inactive = [{
    id: 1,
    text: "Missing"
  }, {
    id: 2,
    text: "Expired"
  }];
  var terminated = [{
    id: 1,
    text: "Natural"
  }, {
    id: 2,
    text: "None"
  }];

  var menuOptions = {
    "1": "approved",
    "2": "active",
    "3": "inactive",
    "4": "terminated",
    "5": "inactive",
    "6": "active"
  };

  var getOptions = menuOptions[typeVal];
  console.log(eval(getOptions));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="type" id="type">
  <option value="">Select Type</option>
  <option value="1">Approved</option>
  <option value="2">Active</option>
  <option value="3">Inactive</option>
  <option value="4">Terminated</option>
  <option value="5">Closed</option>
  <option value="6">Pending</option>
</select>





到目前为止,我的代码可以运行,但是我使用了eval()函数。我看到了很多有关该功能的文章,如果可能,应该避免这样做。我在寻找是否有更好的方法来实现相同的目标,而在javascript中没有该功能呢?如果您有任何建议,请让我知道。谢谢。

最佳答案

您可以访问特定上下文中存在的变量,就像访问数组或对象键一样。

如果onchange回调函数中包含变量,则可以将window[getOptions]更改为this[getOptions]



$("#type").on("change", function() {
  var typeVal = $(this).val();

  var getOptions = menuOptions[typeVal];
  console.log(window[getOptions]);
});


var menuOptions = {
  "1": "approved",
  "2": "active",
  "3": "inactive",
  "4": "terminated",
  "5": "inactive",
  "6": "active"
};

var approved = [{
  id: 1,
  text: "Month"
}, {
  id: 2,
  text: "Week"
}];
var active = [{
  id: 1,
  text: "Progress"
}, {
  id: 2,
  text: "No Feedback"
}, {
  id: 3,
  text: "Office Closed"
}];
var inactive = [{
  id: 1,
  text: "Missing"
}, {
  id: 2,
  text: "Expired"
}];
var terminated = [{
  id: 1,
  text: "Natural"
}, {
  id: 2,
  text: "None"
}];

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="type" id="type">
  <option value="">Select Type</option>
  <option value="1">Approved</option>
  <option value="2">Active</option>
  <option value="3">Inactive</option>
  <option value="4">Terminated</option>
  <option value="5">Closed</option>
  <option value="6">Pending</option>
</select>

关于javascript - 如何找到所选选项的匹配变量名?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58011591/

10-12 12:23
查看更多