CODEWITHSUNDEEP
jqueryselect
Wai Yan
Wai Yan

Reputation: 427

Dropdown change function with jquery

I have 3 Select(dropdown).

Let First Dropdown,Second Dropdown and Third Dropdown. I use jquery change function. When I change first Dropdown,Second Dropdown is appear.And I Changed second Dropdown.But third Dropdown is not appear. I don't know Where is wrong.Please Help me.

Html:

 <div class='select'>
  <select class='myFirstDropdown' name='first'>
   <option value='1'>1
   <option value='2'>2
   <option value='3'>3
  </select>
 </div>

Js:

$('.myFirstDropdown').change(function(){
//var result= $(this).val();
    $('.select').append("<select class='secondDropdown' name='second'><option value='second1'>second1<option value='second2'>Second2</select>");
});
$('.secondDropdown').change(function(){
$('.select').append("<select class='thirdDropdown' name='third'><option value='second1'>second1<option value='second2'>Second2</select>");
});

Upvotes: 0

Views: 3065

Answers (1)

Anujith
Anujith

Reputation: 9370

Try this: SAMPLE

$('.myFirstDropdown').change(function(){
    $('.select').append("<select class='secondDropdown' name='second'><option value='second1'>second1<option value='second2'>Second2</select>");
});

$('.select').on('change', '.secondDropdown', function(){
    $('.select').append("<select class='thirdDropdown' name='third'><option value='second1'>second1<option value='second2'>Second2</select>");
});

Your second select box is added dynamically and therefore event should be attached using on()...

Upvotes: 1

Related Questions