0

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

2
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by andrewliu
0

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.

0

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!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.