I have looked all over and cannot figure out why this code isn't working.
When the drop down is set to value "3" or "4", then another field should pop up below the drop down list. Any ideas?
5 Answers
Change this:
var val = $('#event_options_id option:selected').html();
To :
var val = $('#event_options_id').val();
2 Comments
Ram
nice, maybe i don't know what is the problem.
user1403688
I put that into the fiddle and didn't have any luck
First you needed to call .val() like it was pointed out.
var val = $('#event_options_id option:selected').val();
Then based on the selector you are using you need to use parseInt() on the val to make it a number like so
if ($.inArray(parseInt(val,10), arr) > -1) {
You also had an extra comma when defining your array.
Full Working Code
$(document).ready(function() {
$('#event_options_id').change(function() {
$('.container_add_form').remove();
var val = $('#event_options_id option:selected').val();
var arr = [3, 4];
if ($.inArray(parseInt(val,10), arr) > -1) {
$('<input type="hidden" name="age_required" id="age_required" value="yes" /><div class="container_add_form"><p class="text_content">Please enter your age for grouping purposes.<br /><input name="age" type="text" id="age" size="3" /></p></div>').fadeIn('slow').appendTo('.add_form');
}
});
});
1 Comment
Gabe
$('#event_options_id option:selected') is over kill.1) use .val() instead of .html() to get the option's value.
2) you're comparing the string values to numbers in the array, which will always fail.
var val = $('#event_options_id option:selected').val();
var arr = ['3', '4'];
Comments
Change these lines.
var val = $('#event_options_id option:selected').val();
var arr = ["3", "4"];
To get the combobox value, you have to use 'val()' instead of 'html()'. And you have to change the elements of the array to string. The variable val is a string. The inArray will try to find the element as a string, not a integer.
Comments
I updated your code: http://jsfiddle.net/kCLxJ/7/
$(document).ready(function() {
$('#event_options_id').change(function() {
$('.container_add_form').remove();
// you used .text() but should've used .val()
var val = $('#event_options_id option:selected').val();
var arr = [3, 4];
/*
another problem was that you didn't parse the value into an integer
but you were comparing the value to an array of integers
*/
if ($.inArray(parseInt(val), arr) > -1) {
$('<input type="hidden" name="age_required" id="age_required" value="yes" /><div class="container_add_form"><p class="text_content">Please enter your age for grouping purposes.<br /><input name="age" type="text" id="age" size="3" /></p></div>').fadeIn('slow').appendTo('.add_form');
}
});
});
1 Comment
Mihai Stancu
Perhaps because i didn't follow the answering rules of StackOverflow. I created an answer external to StackOverflow that can only be accessed by visiting the link. Normally links are resources for additional info not the answer itself. The text of the answer should be posted on StackOverflow. Since I saw others giving good answers and i didn't bother updating / completing my answer.