Question

我一直试图让变量与页面上的下拉选项一起使用。我正在努力甚至从功能中获得一个价值，但通过删除＆＃34; var＆＃34;来自o1。现在，如果我在chrome上输入os进入js控制台，我会得到一个值，但是如果我设置另一个等于它的变量，比如b1，那么它就是未定义的。我想在函数之后使用输出添加if语句但是它们也没有用。不确定我做错了什么......

<html>
<head>
<title>Options to variables</title>
</head>
<body>
<form>
Options
<select id="i1" onchange="options()">
    <option selected = "true" disabled="disabled">---</option>
    <option id="1">Option 1</option>
    <option id="2">Option 2</option>
</select><br>
</form>
</body>
<script>
var o1;
function options(){
    o1 = i1.options[i1.selectedIndex].id;
    return o1;
}
var b1 = o1;
</script>
</html>

Answer 1

声明var b1 = o1; 不在函数中。

当页面加载时，您将值undefined从o1复制到b1。

当change事件触发时，您为o1写了一个新值，但您永远不会更改b1，因此它仍为undefined。

不确定我做错了什么

除了上面描述的逻辑错误之外，您解决问题的基本方法也是错误的。当你想用这个值做某事时，你应该读取select元素的值。

您不应尝试复制有关使用全局变量的状态的信息。无论何时需要，都可以从原始选择元素中可靠地获得状态。

Answer 2

一些注意事项：

您的代码依赖于元素具有id时创建的自动全局变量。这通常是一个坏主意，全球命名空间中发生了很多事情，冲突很普遍。相反，请使用document.getElementById查找它们。
从onxyz - 属性样式事件处理程序调用的函数中返回一个值是没有用的（除非您返回false，这将阻止事件的默认操作）。我建议你研究现代事件处理。
您的var b1 = o1;超出了options功能，因此在页面加载时会运行o1。那时undefined为b1，当然undefined为o1。 <{1}}在运行options时被赋予不同的值，但不会更改b1。
在您的id元素上option是不寻常的。通常的做法是给他们value。如果您这样做，可以使用.value上的select来获取其价值。

以下是避免这些问题的示例，并在控制台中显示所选id元素的option（以及select的值）当你改变它时：

＆＃13;

// A scoping function to avoid creating globals
(function() {
  // Get the select element
  var i1 = document.getElementById("i1");
  
  // Watch for `change`
  i1.addEventListener("change", function() {
    // Show the ID of the selected option, and the select's value
    console.log("ID: " + i1.options[i1.selectedIndex].id + ", value: " + i1.value);
  });
})();

＆＃13;

<form>
Options
<select id="i1">
    <option selected = "true" disabled="disabled">---</option>
    <option id="1" value="one">Option 1</option>
    <option id="2" value="two">Option 2</option>
</select><br>
</form>

＆＃13;

事实上，我们可以完全避免使用变量用于选择，因为在事件处理程序中，选择框可用作this：

＆＃13;

document.getElementById("i1").addEventListener("change", function() {
    // Show the ID of the selected option, and the select's value
    console.log("ID: " + this.options[this.selectedIndex].id + ", value: " + this.value);
});

＆＃13;

<form>
Options
<select id="i1">
    <option selected = "true" disabled="disabled">---</option>
    <option id="1" value="one">Option 1</option>
    <option id="2" value="two">Option 2</option>
</select><br>
</form>

＆＃13;

如果您需要支持不具备addEventListener的过时浏览器，my answer to this other question具有您可以使用的功能。

Javascript：当o1有一个值并且等于b1时，为什么b1被认为是未定义的

2 个答案: