Javascript 我的第二个带有下拉列表的脚本无法运行_Javascript_Jquery_Html_Select

Javascript 我的第二个带有下拉列表的脚本无法运行

javascript jquery html select

Javascript 我的第二个带有下拉列表的脚本无法运行,javascript,jquery,html,select,Javascript,Jquery,Html,Select,嗨。我是新来的。我的英语不好我的代码有问题第一步。我做了第一个下拉列表第二步。当第一个下拉列表值更改时，将创建第二个下拉列表第三步。当第二个下拉列表的选定值更改时，应显示警报消息步骤1,2可以，但步骤3不行请告诉我解决这个问题的方法。谢谢 HTML 剧本 /////// It works /////// $('#group').change(function(event){ var optionName = $('#group').val(); var AA =

嗨。我是新来的。我的英语不好

我的代码有问题

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

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

第三步。当第二个下拉列表的选定值更改时，应显示警报消息

步骤1,2可以，但步骤3不行

请告诉我解决这个问题的方法。谢谢

HTML

剧本

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

也许是这样的：

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

此部分：$'company.changefunctionevent{alert$'company.val；}；不执行任何操作，因为id为“company”的元素在运行时不存在。您需要在将select元素附加到文档正文后运行此代码。问题是您的下拉列表是动态创建的。将不起作用的JS替换为以下内容：$document.onchange，company，function{alert$'company.val；}@FrankZ我不明白你说的是在文档正文中添加select元素。这意味着明确的声明？不是动态的？@AndrewAshton感谢您的评论，但上述声明也不起作用。请查看我的演示：

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