Question

我的页面中有三个选择标记，它们的选项是动态创建的。当我更改第一个菜单时，第二个菜单生成完美。如果我再次更改第一个菜单，第二个菜单会完美更改。当我更改第二个菜单时，第三个菜单生成完美。但是，如果我再次更改第二个菜单，则firebug会显示错误，指出 document.getElementById（＆＃34; third_list＆＃34;）为空。怎么解决这个？除此之外，为什么会这样？我已经在我的页面中创建了第三个选择标记。只是动态生成选项子标签。那么任何解决方案呢？

<body>
    <select id="first_list">  
    //menus are fetched by external functions
    </select>
    <select id="second_list" hidden="true">
    </select>
    <select id="third_list" hidden="true">
    </select>  

    <script>  

    $("body").on('change', '#first_list', function( e ) {
        e.preventDefault();
        $.ajax(
        {
            url:'ajax - Copy.php',
            type:'POST',
            async:true,
            data:{
                var1: $('#first_list').val()
            },
            success:function(response) {
                //alert(response);
                var a=(response.toString()).indexOf("<select");
                var b=(response.toString()).indexOf("</select>");
                var c=response.substring(a,b);
                document.getElementById("second_list").style.visibility="visible";
                document.getElementById("second_list").outerHTML=c;
            },
            complete:function(){
                //alert("complete");
            }
        });
    });  


    $("body").on('change', '#second_list', function( e ) { 
        $.ajax(
        {
            url:'ajax - Copy.php',
            type:'POST',
            async:true,
            data:{
                var1: $('#second_list').val()
            },
            success:function(response) {
                var a=(response.toString()).indexOf("<select");
                var b=(response.toString()).indexOf("</select>");
                var c=response.substring(a,b);
                document.getElementById("third_list").style.visibility="visible";
                document.getElementById("third_list").outerHTML=c;
            }
        });
    });
    </script>
</body>

javascript无法识别动态创建的对象

0 个答案: