Hey everyone,

 

Just a quick question.. I want to have a javascript function run when the user selects an option from a basic dropdown list. Is there a simple way to do this?

 

So if they click the first option, it runs javascript function A. If they click the second option, it runs javascript function B. And so on.

Edited February 18, 201313 yr by webdesigner93

yes you can use onchange

 

<select onchange="MyFunction();">
<!--Options go here-->
</select>

Edited February 18, 201313 yr by webdesigner93

Thanks! I thought that was what I would use, but was using it on the options instead of the select tag.

Thanks! I thought that was what I would use, but was using it on the options instead of the select tag.

Np oh btw it says i edited your post that was an accident ment to hit new reply but instead i accidentally added my reply directly into your post changed it back tho so alls good

Still having some issues... it could be my javascript as well, although I've used this function before without error (not with dropdowns though).

 

Here it is: http://jsfiddle.net/wellerweb/Ph6R8/1/

 

Originally, option 'A' is selected, and the text "Hello, World!" is visible.

 

When the user changes the dropdown, the text "Hello, World!" becomes hidden, and the text "Goodbye, World!" should appear via change in class.

 

What am I doing wrong?

Edited February 18, 201313 yr by wellerweb

You could use a simple jQuery function instead of using inline JavaScript. I added an example here: http://jsfiddle.net/Ph6R8/11/

 

I think your original function wasn't targeting an element of the drop down so the function was returning undefined.

 

Hope it helps.

 

Lyndsey.

Edited February 18, 201313 yr by Lyndsey

You could use a simple jQuery function instead of using inline JavaScript. I added an example here: http://jsfiddle.net/Ph6R8/11/

 

I think your original function wasn't targeting an element of the drop down so the function was returning undefined.

 

Hope it helps.

 

Lyndsey.

 

Thats a good suggestion jquery would of deff been easier in this case and probably more productive

Thanks Lyndsey!

 

Would it be possible to modify it to have three possible dropdown selections? Each with their own input that is displayed on selection?

 

Here is what I have http://jsfiddle.net/LxKfK/

Morning,

 

Yes, that's definitely possible. I've modified the above jsfiddle, which now looks like this: http://jsfiddle.net/LyndseyB/LxKfK/2/

 

What I did was completed removed the two hide/unhide functions, we don't really need them. Next, I created the input text boxes ID's based on the options selected value. So, for option 1, its value is 'option1'. The corresponding text box that goes with option 1 has an ID of 'option1'. The jQuery function then grabs the option selected value (thisVal) and finds the corresponding input with ID of ( '#.+thisVal ) to display on the screen.

 

I hope this helps!

Lyndsey.

 

Edit: At the moment, all inputs are hidden on page load. As we know that option 1 is going to be selected by default when the page loads, we could just set #option1 to be visible by default. Just add this to your css:

 

#option1 {
    display:inline;
}

 

Alternatively, add an initial option value which forces the user to select an option, e.g.

<option value=""> Please Select... </option>

Thanks again Lyndsay!

 

I feel like I'm pestering this forum with a lot of questions... sorry if I am... but how would you change a different inputs ID on dropdown change as well as the hiding/unhiding that's already happening?

 

http://jsfiddle.net/ZD5Bj/

No worries at all

 

Here you go: http://jsfiddle.net/LyndseyB/ZD5Bj/2/

 

This new Fiddle does the following:

• Grabs the last character of the select options value, e.g. Option1 becomes just 1 (saved as var inputNum)
• inputNum is appended to the text 'Select' to create the value 'Select1', 'Select2' etc...
• The input ID is set to the above.

I also wrapped your select and its corresponding inputs in a div called 'mySelects' because the function currently hides all inputs when it is run. The new input is contained outside of this div so that it is not hidden.

 

Let me know if you need anything else

 

Lyndsey.