可靠的下拉菜单

时间:2015-01-09 15:40:35

标签: javascript php jquery

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

在我的项目中,每个用户都被绑定到单个父菜单,即当用户登录它时将只加载一个父菜单,并且基于单个父菜单,它将加载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>

提前致谢

1 个答案:

答案 0 :(得分:1)

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

听起来你不想等待focus事件,而是立即运行该功能。

您所要做的就是将您绑定到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)。