My second script with a dropdown-list doesn't work

Question

Hi. I'm new here. And I'm not good in English.

I've got some problem in my code.

Step 1.
I made the first dropdown list.

Step 2.
The second dropdown list would be created when the first dropdown list value is changed.

Step 3.
Alert msg should be shown when a selected value of the second dropdown list is changed.

Step1,2 is OK but Step 3 is NOT.

Please give me the way to solve this problem. thanks!

HTML

<select id="group">
<option value="NONE">SELECT GROUP</option>
<option value="A">A</option>
<option value="B">B</option>
</select>

SCRIPT

/////// It works ///////
$('#group').change(function(event){

   var optionName = $('#group').val();
   var AA = new Array("1", "2");
   var BB = new Array("3", "4");

   switch(optionName){       
   case 'A':
       $('#company').remove().end();
       var s= $('<select ></select>').attr('id','company'); 
       $('<option>').attr('value','NONE').text('A').appendTo(s);
       for(i=0; i<AA.length; i++)
         $('<option>').attr('value', AA[i]).text(AA[i]).appendTo(s);              
       s.appendTo('body');
       break;

  case 'B':
       $('#company').remove().end();
       var s= $('<select></select>').attr('id','company');
       $('<option>').attr('value','NONE').text('B').appendTo(s);                 
       for(i=0; i<BB.length; i++)
        $('<option>').attr('value', BB[i]).text(BB[i]).appendTo(s);           
       s.appendTo('body');
       break;
 default:
       $('#company').remove().end();
       break;
 }
});

///// It doesn't work /////
$('#company').change(function(event){
   alert($('#company').val());
});

This part: $('#company').change(function(event){ alert($('#company').val()); }); doesn't do anything as the element with id 'company' doesn't exist when it runs. You need to run this code after ahving appended the select element to the document body. — FrankZ, Jul 14 '15 at 13:59
The problem is that your drop down is dynamically created. Replace the JS that doesn't work with the following: $(document).on("change","#company",function(){ alert($('#company').val()); }); — Ash, Jul 14 '15 at 14:02
@FrankZ I didn't get it you said "append select element to the doc body". It meant explicit declaration ? Not dynamic ? — Jiman Choi, Jul 15 '15 at 01:14
@AndrewAshton Thank you for your comment but above statement doesn't work either. — Jiman Choi, Jul 15 '15 at 01:22

score 0 · Answer 1 · answered Jul 14 '15 at 14:02

Maybe something like this:

HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<select id="group">
  <option value="NONE">SELECT GROUP</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>
  <select id="company"></select>
</body>
</html>


JAVASCRIPT


var AA = new Array("1", "2");
var BB = new Array("3", "4");
var s = $("#company");

$("#company").hide();

/////// It works ///////
$('#group').change(function(event){
   var optionName = $('#group').val();
   $("#company").show();
   switch(optionName){       
   case 'A':
       $('<option>').attr('value','NONE').text('A').appendTo(s);
       for(i=0; i<AA.length; i++)
         $('<option>').attr('value', AA[i]).text(AA[i]).appendTo(s);      
       break;

  case 'B':
       $('<option>').attr('value','NONE').text('B').appendTo(s);                 
       for(i=0; i<BB.length; i++)
        $('<option>').attr('value', BB[i]).text(BB[i]).appendTo(s);    
       break;
 }
});

///// It doesn't work /////
$("#company").change(function(event){
   alert($("#company").val());
});

https://jsbin.com/bisena/edit?html,js,console,output

My second script with a dropdown-list doesn't work

1 Answers1