在不使用onchange屬性的情況下獲取選定值

Question

我想要使用相同的結果而不使用onchange屬性。 有些想法？

這裏的HTML：

<select onchange="filtro(this)" id="tipo" name="noticia/conteudo/tipo"> 
    <option value="Layout1">Layout1</option> 
    <option value="Layout2">Layout2</option> 
    <option value="Layout3">Layout3</option> 
    <option value="Layout4">Layout4</option> 
    <option value="Layout5">Layout5</option> 
</select> 

這裏是JS：

function filtro(a) { 
    var x = (a.value || a.options[a.selectedIndex].value); 
    alert(x); 
    if (x == "Layout4"){ 
     alert('test4'); 
    } 
} 

Answer 1

你只能在JS做到這一點沒有屬性

document.getElementById("id").onchange=function(){ ... }; 

Answer 2

你可以做的簡單方法

var e = document.getElementById("tipo"); 
var tipoValue = e.options[e.selectedIndex].value; 

會使tipoValue成爲選定選項的值。 如果你想獲得的文字，你可以做到這一點：

var e = document.getElementById("tipo"); 
var tipoText = e.options[e.selectedIndex].text; 

總的來說我的建議是考慮引進一些JavaScript庫，如jQuery

Answer 3

您可以添加一個事件監聽器避免使用onchange屬性。

HTML：

<select id="tipo" name="noticia/conteudo/tipo"> 
    <option value="Layout1">Layout1</option> 
    <option value="Layout2">Layout2</option> 
    <option value="Layout3">Layout3</option> 
    <option value="Layout4">Layout4</option> 
    <option value="Layout5">Layout5</option> 
</select> 

的JavaScript：

function filtro(a) { 
    var x = (a.value || a.options[a.selectedIndex].value); 
    alert(x); 
    if (x == "Layout4"){ 
     alert('test4'); 
    } 
} 

var sel = document.getElementById('tipo'); 
sel.addEventListener('change', function() { filtro(sel) }, false); 

的jsfiddle：http://jsfiddle.net/jeffshaver/HfmWV/7/