javascript - 多个文本框的 onchange 事件

Question

这是我的javascript

function disp(s)
    {
        var st=document.getElementById("stats");
        st=st.options[st.selectedIndex].text;
        document.getElementById("sp").innerHTML="this is changing :"+s;
        if(st=="Other")
        {
            document.getElementById(s).style.display="inline";
        }
        else
            document.getElementById(s).style.display="none";
    }

这是我的前端

Rain Guage Status
            <select id="stats" onchange="disp('oth')"><option>
                Good
                    </option>
                    <option>
                        Bad
                    </option>
                    <option>
                        Other
                    </option></select>
                    <input type="text" placeholder="Please enter the status briefly" style="display:none" id="oth">
Exposure
            </td>
            <td><select id="expo" onchange="disp('othe')"><option>
                Good
                    </option>
                    <option>
                        Bad
                    </option>
                    <option>
                        Other
                    </option></select>
                    <input type="text" placeholder="Please enter the exposure briefly" style="display:none" id="othe">

我面临的问题是只有在显示 rainguage 文本框时才会打开 exposure texbox ...除了需要显示文本框 id 的函数外，这两个下拉菜单都没有关系。 就像显示 rainguage tb 和显示 exposure tb 一样，我无法隐藏 exposure tb，除非我隐藏 rainuage tb。请帮忙

Answer 1

这是因为您通过 id stats 获取元素。相反，您可以使用函数传递元素。

<select id="stats" onchange="disp(this, 'oth')">
<select id="expo" onchange="disp(this, 'othe')">

并像这样更新你的函数:

function disp(ele,s)
{
    //var st=document.getElementById("stats"); No need for this line
    var st=ele.options[ele.selectedIndex].text; //use ele from here
    document.getElementById("sp").innerHTML="this is changing :"+s;
    if(st=="Other")
    {
        document.getElementById(s).style.display="inline";
    }
    else
        document.getElementById(s).style.display="none";
}