Question

我是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>

我想要的是在选择选项更改时更改书面文字。感谢。

Answer 1

您遇到的问题是您没有将下拉菜单的更改操作绑定到某个功能。试一试：

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

here is a jsfiddle此代码

你可以read more about event listeners here。

Answer 2

在页面加载时将运行的脚本，我想你需要创建一个函数来执行这个脚本，当选择发生变化时会调用它。

喜欢<select onchange="jsFunction()">

Answer 3

使用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是注册W3C DOM中指定的事件侦听器的方法。它的好处如下：

它允许为事件添加多个处理程序。这对于即使使用其他库/扩展也需要正常工作的DHTML库或Mozilla扩展特别有用。
当听众被激活（捕捉与冒泡）时，它可以让你对相位进行更精细的控制。
它适用于任何DOM元素，而不仅仅是HTML元素。

Demo

Javascript document.write选择选项

3 个答案: