的JavaScript文件撰写选择选项

我在Javascript中新，我只是想改变打印网页上的字值，我已经下一个代码：的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>

我想是当选择选项更改时更改书面文字。谢谢。

来源

2013-11-22 PampiPechan

了解事件处理：http：//www.quirksmode.org/js/introevents.html，http://www.w3.org/wiki/Handling_events_with_JavaScript。并且不要使用'document.write'。 –

您遇到的问题是，你还没有绑定的下拉到功能上有变化的行动。这给一试：

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

这个代码

来源

2013-11-22 02:46:02

您可以将处理程序的整个主体简化为'document.getElementById（“p1”）。innerHTML = this.value'。但是，您必须将最后一次函数调用改为'x.onchange（）'。 http://jsfiddle.net/mG3b4/1/它肯定比'var y = x.options [x.selectedIndex] .value更简单;' –

这就是我所需要的，在这个例子中，我学到了一些关于更新和事件监听器的知识。谢谢。 – PampiPechan

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

像<select onchange="jsFunction()">

来源

2013-11-22 02:42:49

使用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

来源

2013-11-22 02:44:50

*“它适用于任何DOM元素，而不仅仅是HTML元素。”*您的意思是SVG吗？或者你在谈论哪些其他DOM元素？ –

任何DOM元素都包含XML和java DOM元素。尽管所有这些语法都有所不同。 –

那么，DOM就是DOM。一旦你解析了源代码，无论是XML还是HTML（或其他），你都不需要区分DOM的创建位置。但是你是对的，定义'getElementByID'的接口独立于任何特定的标记（http://www.w3.org/TR/DOM-Level-2-Events/events.html）。我在问，因为实际上DOM的扩展只适用于HTML，但这不是其中之一。 –

的JavaScript文件撰写选择选项

回答

相关问题