用javascript编写选择元素的脚本
提问于 2017-11-22 03:43:44
我发现很难为html select元素设置样式，甚至添加事件侦听器。
预期行为我想提醒选择选项的文本内容。
这是HTML代码：
<select name="chooseSub" id="chooseSub" placeholder="Here we go">
<option value="makeChoice" id="disabled">--Make a choice-- </option>
<option value="ai" id="ai">Artificial Intelligence</option>
<option value="angularJs" id="angularJs">AngularJs</option>
<option value="css" id="css3">CSS3</option>
</select>这是javascript代码：
var select = document.getElementById('chooseSub');
select.addEventListener('click', function(event) {
if (event.target && event.target.nodeName === 'option') {
alert(event.target);
}
});实际行为根本不做任何事情
回答 2
Stack Overflow用户
发布于 2017-11-22 03:54:13
你是说这个吗？
var select = document.getElementById('chooseSub');
select.addEventListener('change', function(event) {
alert(event.target.selectedOptions[0].text);
});<select name="chooseSub" id="chooseSub" placeholder="Here we go">
<option value="makeChoice" id="disabled">--Make a choice-- </option>
<option value="ai" id="ai">Artificial Intelligence</option>
<option value="angularJs" id="angularJs">AngularJs</option>
<option value="css" id="css3">CSS3</option>
</select>
Stack Overflow用户
发布于 2017-11-22 04:42:49
function myFunction(opt){
alert(opt.options[opt.selectedIndex].text);
/*if you want value of selected option : alert(opt.options[opt.selectedIndex].value);*/
}<select name="chooseSub" id="chooseSub" placeholder="Here we go" onChange='myFunction(this)'>
<option value="makeChoice" id="disabled">--Make a choice-- </option>
<option value="ai" id="ai">Artificial Intelligence</option>
<option value="angularJs" id="angularJs">AngularJs</option>
<option value="css" id="css3">CSS3</option>
</select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47433862
复制相关文章
点击加载更多
腾讯云开发者
