Onchange events for multiple text fields

Question

here is my 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";
    }

and here is my front end

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">

The problem I am facing is that the texbox exposure only opens when the rainguage text field is displayed ... there is nothing to do with both drop-down lists except the function that displays the text field identifier. for example, if the tb string is displayed and the tb exposure is displayed, I cannot hide the tb exposure if I do not hide the rainguage tb. please, help

Answer 1

This is because you get the element by id stats. Instead, you can pass an element with your function.

<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";
}

Answer 2

onchange . 1. , .

<select id="stats" class='select-box">
<select id="expo" class='select-box">

2. jquery onchange

$( ".select-box" ).change(function() {
      alert( "option selected" );
   });