的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文件撰寫選擇選項

回答

相關問題