Javascript文档.write选择选项

Javascript document.write select option

本文关键字：选项 选择 write 文档 Javascript      更新时间：2023-09-26

我是Javascript的新手，我只是想更改网页上打印的单词值，我有下一个代码：

<select id="quantity">
    <option value="value1">1</option>
    <option value="value2">2</option>
</select> 
<p id="p1">Change Value </p>
<script>
    var x = document.getElementById("quantity");
    var y=x.options[x.selectedIndex].value;
    document.getElementById("p1").innerHTML=y;
</script>

我想要的是在选择选项更改时更改书写的单词。谢谢

您遇到的问题是没有将下拉菜单的更改操作绑定到函数。试试看：

var x = document.getElementById("quantity");
var updateField = function() {
    var y=x.options[x.selectedIndex].value;
    document.getElementById("p1").innerHTML=y; 
}
x.onchange = updateField;
updateField();

这是这个代码的一部分

您可以在此处阅读有关事件侦听器的更多信息。

页面加载时将运行的脚本，我想您需要创建一个函数来执行该脚本，该函数将在选择更改时调用。

如<select onchange="jsFunction()">

使用addEventListener从外部附加事件：

var myEl = document.getElementById('quantity');
myEl.addEventListener('change', function() {
   var x = document.getElementById("quantity");
   var y=x.options[x.selectedIndex].value;
   document.getElementById("p1").innerHTML=y;
}, false);

addEventListener是注册W3CDOM中指定的事件侦听器的方法。其优点如下：

  • 它允许为一个事件添加多个处理程序。这对于DHTML库或Mozilla扩展特别有用，即使使用了其他库/扩展，它们也需要正常工作。

  • 当监听器被激活时，它为您提供了对阶段的细粒度控制（捕获与冒泡）。

  • 它适用于任何DOM元素，而不仅仅是HTML元素。

演示

相关文章：