Question

TASK： 根据第一个列表中的选项动态创建第二个选择列表。出于测试目的，我附上了简单的场景。

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调用，并添加alert（'changed'），如下所示：

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

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

问题： 如何使这个东西工作？

Answer 1

您应该使用id来调用ajax并将optionTwo 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下拉列表中添加空白选项。

Answer 2

尝试使用委托事件进行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>

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

2 个答案: