在不使用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/