在不使用 onchange 属性的情况下获取选定的值答案

【问题标题】：Getting selected value without using onchange attribute在不使用 onchange 属性的情况下获取选定的值
【发布时间】：2013-02-25 19:02:01
【问题描述】：

我想要不使用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');
    } 
}

【问题讨论】：

如果不改变，什么时候？
我很想知道代码在做什么，但不使用 select 标签内的 onchange attirbute 和里面的函数

标签： javascript select onchange selectedvalue

【解决方案1】：

您可以添加一个事件侦听器以避免具有 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/

【讨论】：

解决方案找到了stackoverflow.com/questions/9769868/…

【解决方案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

【讨论】：

【解决方案3】：

你只能在没有属性的js中这样做

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

【讨论】：