Question

您好。我是新来的。而且我的英语不好。

我的代码中遇到了一些问题。

步骤1.
  我做了第一个下拉列表。


步骤2.
  当第一个下拉列表值更改时，将创建第二个下拉列表。


步骤3.
  当第二个下拉列表的选定值发生变化时，应显示警报消息。


Step1,2没问题，但步骤3不是。


请给我解决这个问题的方法。谢谢！

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());
});

Answer 1

也许是这样的：

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

我的第二个带下拉列表的脚本不起作用

1 个答案: