1

我想在下拉菜单中显示数据库中的所有表列表，并允许用户选择表名。当用户选择表名时，我想显示所有数据。html文件是这样的 

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){

            $.ajax({url:"home.php?id=1",
                success:function(result){
                    $("#div1").html(result);                 
                }}); 

            $("#dropdown").change(function(){
                alert("list item selected");
                $.ajax({url:"home.php?id=2&tablename="+tableForm.tableLists.value,
                    success:function(result){
                        $("#div2").html(result);
                    }}); 
            });
        });

    </script>
</head>
<body>
    <button value="add" >
        <form name="tableForm"> 
            <div id="div1"></div>
        </form>
    </button>
    <br><hr>
    <div id="div2"></div>
</body>

此页面运行正常并显示属于数据库的所有表名称列表。但是当我从下拉列表中选择一个值时，它甚至不会提醒“选择列表项”消息。怎么做才能让它工作？

这是下拉列表的图像 在此处输入图像描述

4

3 回答 3

2

看起来下拉框是动态加载到页面中的，因此您必须使用以下方法将该函数绑定到动态添加的元素.on()：

$(document).on('change', '#dropdown', function(){
    console.log("list item selected");
    // do whatever here
});
于 2012-11-23T10:45:08.790 回答
0

我认为下拉框是动态加载到页面中的。你可以这样使用

$("#dropdown").on('change',function(){
                alert("hoi");
                $.ajax({url:"home.php?id=2&tablename="+tableForm.tableLists.value,
                    success:function(result){
                        $("#div2").html(result);
                    }}); 
            });
于 2012-11-23T10:47:07.193 回答
0

正如您的代码所暗示的那样，您正在动态填充下拉列表，并且在您的代码中，您正在提供一个不起作用的本地事件，还有其他几个事件处理程序，例如.on .bind .live等，如果我必须在这种情况下工作，我肯定更喜欢使用.on或者.live你的代码必须是这样的：

$("#dropdown").live('change',function(){
    alert("list item selected");
    $.ajax({
       url:"home.php?id=2&tablename="+tableForm.tableLists.value,
       success:function(result){
            $("#div2").html(result);
          }
    }); 
});

或这个：

 $("#dropdown").on('change',function(){
    alert("list item selected");
    $.ajax({
       url:"home.php?id=2&tablename="+tableForm.tableLists.value,
       success:function(result){
            $("#div2").html(result);
          }
    }); 
});
于 2012-11-23T10:55:00.553 回答