Option Select Value

[andrewliu]

Hello,

I'm having trouble figuring this one out. I'm trying to output more field boxes when a certain value is selected from a populated drop down menu.

<select name="selected_category" id="selected_category">
<option value='0'>Select Category</option>
<option value='1' id='text' >Text</option>
<option value='2' id='text2' >text2</option>
<option value='new_category' id='new_category' >Add New</option>
</select>

<div class="works" style="display:none;">
<label for="add_new_category">Add New Category</label>
<input type="text" name="add_new_category" id="add_new_category"/>
</div>

This is my jquery script

$(document).ready(function(){
	var selection = $("#selected_category option:selected").val();
	
	if(selection == 'new_category')
	{
		$('.works').show();	
	}
	
});

Can someone help me out as I'm still learning jquery?

Thank you

[andrewliu]

any suggestions?

Thanks

[SolidSolutions]

you need to have an onchange event in your dropdown call a function:

<select name="selected_category" id="selected_category" onchange="selectChange();">

you can change your jquery to:

function selectChange() {

	var selection = $("#selected_category option:selected").val();
	
	if(selection == 'new_category')
	{
		$('.works').show();	
	}
}

no need to put the function in the document.ready but you can if you want.

[andrewliu]

I got it to work!

I used alert checks and figure out that I didn't set my values properly.. Lesson learned! always check each step with alerts!