動態添加的選擇列表按預期工作

任務： 根據第一個列表中的選項動態創建第二個選擇列表。出於測試目的，我附上了簡單的場景。動態添加的選擇列表按預期工作

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

動態添加的選擇列表按預期工作

回答

相關問題