Question

尝试确定HTML选择对象的值时遇到了一些麻烦。

我有2个项目，分别记为“值1”或“值2”，但是我尝试的任何方法在打印到控制台时都只会返回“未定义”

var catId = document.getElementById('catid');
var catCheck = catId.options[catId.selectedIndex].value;

console.log(catId);
console.log(catCheck);

<select name="catid" id="catid">
    <option value="1">Category</option>
    <option value="2">Product</option>
</select>

但是，当我使用console.log（catId.Value）或console.log（catCheck.value）时（很显然，我并没有同时尝试两者），我只是返回了“未定义”值。

我想基于此变量运行IF ELSE语句，因此理想情况下，我希望它能够拾取两个值中的至少一个！

很可能是我犯了一个愚蠢的错误，只是看不见树木的树木，但任何帮助将不胜感激

Answer 1

您还可以像这样获得所选的<select> <option>：

var catCheck = document.getElementById("catid").selectedIndex;
console.log(catCheck);

您的第一个选项将返回0，第二个返回1，依此类推。您无需使用value。

Answer 2

您可以通过为select事件添加事件侦听器来监听change元素的更改。每当您在下拉列表中选择新值时，都会触发performDropdownAction函数。然后，您可以使用this.value来获取您正在使用的当前下拉菜单项的值。

我还添加了一个window.onload事件，该事件将在您的网页加载后触发，这意味着在页面加载以及选择新项目时它将执行performnDropdownAction。

请参见下面的工作示例：

const performDropdownAction = function() {
  let current = this.value || document.getElementById('catid').value;
  if (current == 1) {
    console.log("One is selected");
  } else if (current == 2) {
    console.log("Two is selected");
  }
}

window.onload = performDropdownAction;

document.getElementById('catid').addEventListener('change', performDropdownAction);

<select name="catid" id="catid">
  <option value="1">Category</option>
  <option value="2">Product</option>
</select>

从JS If语句的HTML select语句中获取价值

2 个答案: