CODEWITHSUNDEEP
javascripthtmleventsdom
John M
John M

Reputation: 14668

Pass the value of a SELECT to a Javascript function via the onchange event?

I have a HTML page that contains a search box containing a number of textboxes.

The first part of the search box is a SELECT dropdown list that contains a variety of report types. Each report type requires 1 or more of textboxes to be filled in to filter the query results. My goal is hide the textboxes that are not required by the current report type.

How do I pass the currently selected value from the SELECT to the Javascript function via the onchange event?

<select name="report_type" onchange="hide();">
<option value="full_history">Full History</option>
<option value="partial_history">Partial History</option>            
</select>

Upvotes: 13

Views: 46080

Answers (2)

learner
learner

Reputation: 13

function f1()
{
var obj1= document.getElementById("img");
var obj2= document.getElementById("s1");
obj1.src=obj2.value;
}

Select Image:
    <select id="s1" onchange="f1()">
        <option value="img1.jpg">img1.jpg</option>
        <option value="img2.jpg">img2.jpg</option>
        <option value="img3.jpg">img3.jpg</option>
        <option value="img4.jpg">img4.jpg</option>

    </select> <br><br>
    <img id='img' src="img1.jpg" height="500" width="500">

Upvotes: 0

gabe3886
gabe3886

Reputation: 4265

<select name="report_type" onchange="hide(this.value);">
<option value="full_history">Full History</option>
<option value="partial_history">Partial History</option>            
</select>

When doing this the function have whatever value the select currently has.

Upvotes: 19

Related Questions