create a combo box with javascript

[sonita]

Hi

i have two input[ type =text] and I want the user to enter a class name and a capacity to provide the desired class,

Then click on the button btnAdd[input type=button](this name is Addcategory in the attach image),Read the user entered values​​, and then make a combobox and it will add value to it.

i write this ,but don't work ,please help me.

 

$('<option></option>').html(className+","+classCapacity).appendTo('article#leftcol > div#box2 > div.wrap > select#combo');

 

i want ,when the click in button ,create this comboBox ,but i don't undrestand ,where i make a mistake.

this code is a my javascript code:

$(function () {

var Box= $('section>article#leftcol>div#box2').hide();

var className = $(':text#name').val();

var classCapacity = $(':text#capacity').val();

$('#btnAdd').click(function () {

Box.fadeIn(1000);

$('<option></option>').html(className + "," + classCapacity).appendTo('article#leftcol > div#box2 > div.wrap > select#combo');

});

$('#btnAdd1').click(function () {

alert('test');

});

});

 

please help me?????????

 

[dsonesuk]

className might be reserved, option .html() should be .text() i think you will find, as id ref are unique within a page just use select#combo to append to.

 

OR

 

you should never use .html() to apply value to form elements, always use .val() instead, IF that is what you are trying to attempt.

Edited November 27, 2013 by dsonesuk

[sonita]

my complate code is this:,but don't work:

$(function () {

var class_name = $(':text#name').val();

var classCapacity = $(':text#capacity').val();

var selectedItem;

var studentName = $(':text#st_name').val();

var studentAge = $(':text#st_age').val();

// var cap = $(':text#capacity').val();

// var my_html = '<option value='"+cap"'>' + class_name + '</option>';

$('#btnAdd').click(function () {

//$('#compo').append(my_html);

//$('#combo').append("<option>h</option>");

alert('test');

});

$('#btnAdd1').click(function () {

alert('test1');

});

});

if i remove comment line ,this code don't work nut when i put comment ,with clickbutton show alert().why?

plaese help me. very very important.

Edited November 27, 2013 by sonita

[dsonesuk]

Show html so we see you are reference the id and classes correctly, main problem may be that you are getting the value onloading of page, NOT when button clicked so it will be empty if no value is already defined by user, add it to click event.