作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试让 JavaScript 监听选择选项的事件。一旦 JavaScript 知道我点击了其中一个选项,它就会更新提交按钮的功能。它与每个选项内联的老式 onclick=""非常相似,但设置更安全(这似乎在 Chrome 中也不起作用)。这是我的一小段代码,它可以在 Firefox、IE 中运行,但不能在 Chrome 中运行。
HTML:
<select>
<option id="zero">--</option>
<option id="one">Choice one</option>
<option id="two">Choice Two</option>
<option id="three">Choice Three</option>
</select>
<button id="submit">Submit</button>
JavaScript:
function _(el)
{
return document.getElementById(el);
}
function resetOption()
{
_('submit').setAttribute('onclick', '');
_('submit').value = "Choose location";
}
function optionOneChosen()
{
_('submit').setAttribute('onclick', 'functionOne()');
_('submit').value = "Location one";
}
function optionTwoChosen()
{
_('submit').setAttribute('onclick', 'functionTwo()');
_('submit').value = "Location two";
}
function optionThreeChosen()
{
_('submit').setAttribute('onclick', 'functionThree()');
_('submit').value = "Location three";
}
document.addEventListener('DOMContentLoaded', function ()
{
_('zero').addEventListener('click', resetOption);
_('one').addEventListener('click', optionOneChosen);
_('two').addEventListener('click', optionTwoChosen);
_('three').addEventListener('click', optionThreeChosen);
});
我尝试进行一些调试,系统似乎在“DOMContentLoaded”函数内部中断,就好像 Chrome 无法识别我尝试访问的属性一样。那么我错过了什么?或者就此而言,Chrome 是否实现了其他浏览器尚未标准化的安全功能?万分感谢!杰弗里
最佳答案
这将产生相同的结果:
var select = document.querySelector("select"),
button = document.querySelector("button");
select.addEventListener("change", function(e) {
var option = this.options[this.selectedIndex];
switch (option.id) {
case "zero": button.value = "Choose Location"; break;
case "one": button.value = "Location one"; break;
case "two": button.value = "Location two"; break;
case "three": button.value = "Location three"; break;
}
});
关于javascript - 在 Google Chrome 中使用 JavaScript 从 <select> 中选择 <option>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33051667/
我是一名优秀的程序员,十分优秀!