All geek questions in one place

Dynamically added select list does not work as expected

TASK: Create a second selection list dynamically depending on the option from the first list. For testing purposes, I have attached a simple script.

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) ?>

Problem: A second list with the name optiontwowill be attached as it should. However, when I select an option from it now, some option will work (for example, Option 5and Option 6), and Option 7will not work (this will not cause AJAX). I do not know what might cause this behavior.

I noticed that if I remove the AJAX call from the second list and add a warning ('changed'), like this:

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

optiontwo , . , .

: ?

+4
2

- optiontwo select: -

<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>
0

id ajax Two 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.

0

Source: https://habr.com/ru/post/1622889/

More articles:


All Articles