Select JavaScript 中的选项 html

Question

我正在尝试为 <select> 的 <option> 制作 JavaScript，其中包含 2 个项目，但我似乎无法进行任何活动一旦选择了其中一个。这是我的代码：

var e1 = document.getElementById("#selector").option[0].text;
var e2 = document.getElementById("#selector").option[1].text;
var e3 = document.getElementById("#selector").option[2].text;
document.querySelector("e1").addEventListener("click", myInfo, false);

function myInfo(){
  alert("Test");
}

<select id="selector">
  <option value="" disabled="disabled" selected="selected">Select a layout</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

Answer 1

我认为您不了解这些功能，尤其是 querySelector 的工作原理。

您应该改用 change 事件：

var val;
document.getElementById("selector").addEventListener("change",function(){
  val = this.value; // or document.getElementById("selector").value
  // then use your value to do other things
});

p.s。 querySelector方法的使用请在网上搜索。显然你不知道它是如何工作的。

Answer 2

您的 select 元素看起来不错。但是您的代码需要更改：

var selector = document.getElementById("selector")

selector.addEventListener("change", function(){
    alert(selector.options[selector.selectedIndex].text);
});

这就是您所需要的。不要忘记在您的代码中提及

var e3 = document.getElementById("#selector").option[2].text;

到 select by id 只需写 'selector' 而不是 '#selector'。它被称为 'options' 而不是 'option'.

希望对您有所帮助

Select JavaScript 中的选项 html

Select option html in JavaScript

javascript

html

select

option