javascript - 可靠的下拉菜单

Question

我正在尝试制作一个可靠的下拉菜单。

在我的项目中，每个用户都绑定(bind)到单个父菜单，即当用户登录时，它将仅加载一个父菜单，并且基于单个父菜单，它将加载 2 或 3 个子菜单。此过程适用于为不同用户分配不同父菜单的所有其他用户。

我的问题是，当用户登录时，他必须单击单个预加载的父菜单，然后它将加载子菜单。但我想加载子菜单而不单击单个预加载的父菜单。

生成父菜单的PHP代码是

<select name="ddlstate"  id="ddlstate" class="ddlstate" style="width: 200px"  >
      <?php
       require('connect.php');           
        $list=mysql_query("select id,name from tbl_state where id='$region_session' ");
       while($row_list=mysql_fetch_array($list))
       {
        ?>

        <?php
        $id=$row_list['id'];
        $data=$row_list['name_en'];
        echo '<option value="'.$id.'">'.$data.'</option>';
        ?>     
</select>

生成子菜单的Javascript代码是

<script type="text/javascript">
$(document).ready(function()
    {
    $(".ddlregion").focus(function()
    {
    var id=$(this).val();
    var dataString = 'id='+ id;

    $.ajax
    ({
    type: "POST",
    url: "menu_update.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $(".ddl_lbtype").html(html);

    } 
    });

    });
    });

</script>

提前致谢

Answer 1

您的 jQuery 代码等待页面准备就绪，然后将函数绑定(bind)到类 ddlregion 元素的 focus 事件。

听起来您不想等待 focus 事件，而是立即运行该函数。

您所要做的就是将绑定(bind)到 focus 事件的函数直接放入对 ready 的调用中(并替换 this 与菜单元素)。

我无法对此进行测试，因为您没有提供 HTML，但我所做的只是进行了我提到的更改并清理了格式。希望它有效!

$(document).ready(function(){
    var id=$(".ddlregion").val(); 
    var dataString = 'id='+ id;
    $.ajax({
        type: "POST", 
        url: "menu_update.php",
        data: dataString,
        cache: false,
        success: function(html){
            $(".ddl_lbtype").html(html);
        } 
    });
});

考虑仅将完整的菜单发送给客户端或使用 $.load 引入菜单的 HTML(假设您的 API 将允许 GET 而不是 POST)。