动态添加的选择列表按预期工作

任务： 根据第一个列表中的选项动态创建第二个选择列表。出于测试目的，我附上了简单的场景。动态添加的选择列表按预期工作

HTML：

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("select[name='optionone']").on('change',function(){   
       var option = $("select[name='optionone']").val();    
       jQuery.ajax({ 
        type: "GET", 
        url: "data.php", 
        data: "option="+option, 
        success: function(response){ 
         $("#ajaxcall").html(response); 
         $("#ajaxcall").show(); 
        } 
       });   
      }); 

      $('#ajaxcall').on('change', function(){ 
       $("select[name='optiontwo']").on('change', function() { 
        var optionone = $("select[name='optionone']").val();        
        var optiontwo = $("select[name='optiontwo']").val();  
        console.log(optionone +'|||'+ optiontwo)    
        $.ajax({ 
         type: "GET", 
         url: "data.php", 
         data: "optionone="+optionone+"&optiontwo="+optiontwo, 
         success: function(response){ 
          $("#ajaxcall").html(response); 
          $("#ajaxcall").show(); 
         } 
        });   
       }); 
      });   
     }); 
    </script> 

</head> 

<body> 
Option one: 
<select name="optionone"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    <option value="4">Option 4</option> 
</select> 

<div id="ajaxcall" style="display:none">  

</div> 
</body> 
</html>

DATA.php

Option two: 
<select name="optiontwo"> 
    <option value="5">Option 5</option> 
    <option value="6">Option 6</option> 
    <option value="7">Option 7</option> 
    <option value="8">Option 8</option> 
</select> 
<?php var_dump($_GET) ?>

问题： 命名为optiontwo二名单将得到重视的应该。但是，当我现在选择它的选项时，某些选项将起作用（例如Option 5和Option 6），而Option 7将不起作用（它不会进行AJAX调用）。我不知道什么会导致这种行为。

我注意到，如果我删除从第二个列表AJAX调用，并添加警报（“改为”）是这样的：

$('#ajaxcall').on('change', function(){ 
    $("select[name='optiontwo']").on('change', function() { 
     alert('changed')      
    }); 
});

，改变optiontwo几次，然后它会调用警报几次。我不知道这是否是正常行为。

问题： 如何让这件事情起作用？

来源

2016-01-05 RhymeGuy

使用optiontwo'而不是使用'div'元素的不可靠的'change'事件'一个动态的事件处理程序。 –

**边注**如果您希望页面加载速度更快，请在''之前放置al脚本，这样页面将在加载javascript之前呈现。这样你就会看到一些内容，而不是等待javascript加载 – SuperDJ

尝试使用委托事件为optiontwo选择： -

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("select[name='optionone']").on('change',function(){   
      var option = $("select[name='optionone']").val();    
      jQuery.ajax({ 
       type: "GET", 
       url: "data.php", 
       data: "option="+option, 
       success: function(response){ 
        $("#ajaxcall").html(response); 
        $("#ajaxcall").show(); 
       } 
      });   
     }); 

     $('#ajaxcall').on('change', "select[name='optiontwo']", function() { 
      var optionone = $("select[name='optionone']").val();        
      var optiontwo = $("select[name='optiontwo']").val();  
      console.log(optionone +'|||'+ optiontwo)    
      $.ajax({ 
       type: "GET", 
       url: "data.php", 
       data: "optionone="+optionone+"&optiontwo="+optiontwo, 
       success: function(response){ 
        $("#ajaxcall").html(response); 
        $("#ajaxcall").show(); 
       } 
      });   
     });   
    }); 
</script>

来源

2016-01-05 10:37:18 BenG

您应该使用id调用ajax并将选项两个ajax调用移动到data.php。尝试如下：

第一页

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#optionone").on('change',function(){   
       var option = $("select[name='optionone']").val();    
       jQuery.ajax({ 
        type: "GET", 
        url: "data.php", 
        data: "option="+option, 
        success: function(response){ 
         $("#ajaxcall").html(response); 
         $("#ajaxcall").show(); 
        } 
       });   
      }); 
     }); 
    </script> 

</head> 

<body> 
Option one: 
<select id="optionone" name="optionone"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    <option value="4">Option 4</option> 
</select> 
<div id="ajaxcall" style="display:none">  
</div> 
</body> 
</html>

data.php

Option two: 
<select id="optiontwo" name="optiontwo"> 
    <option value="5">Option 5</option> 
    <option value="6">Option 6</option> 
    <option value="7">Option 7</option> 
    <option value="8">Option 8</option> 
</select> 
<?php var_dump($_GET) ?> 
<script> 
$("#optiontwo").on('change', function() { 
    var optionone = $("select[name='optionone']").val();        
    var optiontwo = $("select[name='optiontwo']").val();  
    console.log(optionone +'|||'+ optiontwo)    
    $.ajax({ 
     type: "GET", 
     url: "data.php", 
     data: "optionone="+optionone+"&optiontwo="+optiontwo, 
     success: function(response){ 
      $("#ajaxcall").html(response); 
      $("#ajaxcall").show(); 
     } 
    });   
}); 
</script>

而且在optiontwo滴添加空白选项了。

来源

2016-01-05 10:28:32 AnkiiG

@RhymeGuy你有没有试过上面的代码？ – AnkiiG

感谢您提供您的答案！它正在工作，但我已经接受了另一个答案，因为它更适合我。为此事道歉！ – RhymeGuy

@RhymeGuy没有问题 – AnkiiG

动态添加的选择列表按预期工作

回答

相关问题