Получение выбранного значения без использования атрибута 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/