zoukankan      html  css  js  c++  java
  • jquery 实现层级下拉框联动效果 代码

    <select name="fCareId" id="fCareId">
          <option selected="selected" value="0">选择一级分类</option>
        </select>
        <select name="fCareItemId" id="fCareItemId">
          <option selected="selected" value="0">选择二级分类</option>
        </select>

    Jquery代码:

    <script type="text/javascript">
    $("#fCareId").change(function(){
            var byType = $("#byType").val(); 
            var fCareId = $("#fCareId").val(); 
            var dataString = {"byType":byType,"fCareId":fCareId};
            var encoded = $.toJSON( dataString ); 
    
            $.ajax({
                type: "POST",
                url: "../../careBasicAll",
                data: encoded,
                dateType:"json",
                success: function(data) {
                    $("#fCareItemId").empty();  //清空
                    $.each(data,function(i,obj){
            
                        var html="<option value='"+obj.id+"'>"+obj.itemName+"</option>";
                        $("#fCareItemId").append(html);  //append函数
                 
                    });
                    
                },
                error: function(xhr) {
                    //中间发生异常,具体查看xhr.responseText
                    alert("error:" + xhr.responseText);
                }
               
            });
            
        });
    </script>


    注意: append函数与appendTo函数区别?

    例如: $("<p>Hello World</p>").appendTo($("#two")); 

    ----><div id="two"> <p>Hello World</p> </div>

    $("#fCareItemId").append("<option value='test'>测试</option>");

    ----><select name="fCareItemId" id="fCareItemId">
          <option  value="test">测试</option>
        </select>

    实际上,使用appendTo这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。


     

  • 相关阅读:
    Java Native Method
    SQL语句优化
    Ibatis的环境搭建以及遇到的问题解决
    Java 构建器
    SpringMVC自定义视图 Excel视图和PDF视图
    java 枚举的常见使用方法
    mysql 根据某些字段之和排序
    MFC The Screen Flickers When The Image Zoomed
    How To Debug Qmake Pro File
    Gcc And MakeFile Level1
  • 原文地址:https://www.cnblogs.com/simpledev/p/3446459.html
Copyright © 2011-2022 走看看