zoukankan      html  css  js  c++  java
  • Easyui多个下拉框联动效果

    好久没写前端了,以前在做多级联动的时候,用的是easyui的tree结构,但是需要一次性全部加载,不是按需加载,性能不好,退而求其之,用多个下拉框做

    eayui的combobox  有onSelect,onLoadSuccess等方法,具体可以看http://www.jeasyui.net/plugins/169.html文档API

    1、html

    <table style="padding:10px 20px 10px 40px;">
                <tr>
                    <td>省级:</td>
                    <td>
                        <input id="province" name="province" class="easyui-combobox"/>
                    </td>
                    <td>市级:</td>
                    <td>
                        <input id="city" class="easyui-combobox"/>
                    </td>
                    <td>区级:</td>
                    <td>
                        <input id="county" class="easyui-combobox"/>
                    </td>
                   </tr>
              </table> 

    2、js

    $('#province').combobox({
             valueField:'code',
              textField:'name',
              url:'../../area/getOne.do',
              method:'get',
              onSelect:function(rec){
               var url1='../../area/getTwo.do?pid='+rec.code+'&tag='+(new Date().getTime());
               $('#city').combobox('reload',url1);
             },
             onLoadSuccess: function () {  //加载完成后,设置选中第一项
                 var val = $(this).combobox('getData');
                 $(this).combobox('select', val[0].code);//前面设置的valueField属性名
                 
             }
        });
    $('#city').combobox({
            valueField:'code',
             textField:'name',
             method:'get',
             onSelect:function(rec){
              var url1='../../area/getThree.do?pid='+rec.code+'&tag='+(new Date().getTime());
              $('#county').combobox('reload',url1);
             },
            onLoadSuccess: function () {  //加载完成后,设置选中第一项
              var val = $(this).combobox('getData');
              $(this).combobox('select', val[0].code);
              
            }
        });
        $('#county').combobox({
             valueField:'code',
              textField:'name',
              onLoadSuccess: function () {  //加载完成后,设置选中第一项
               var val = $(this).combobox('getData');
               $(this).combobox('select', val[0].code);
               
             }
        });

    3、效果图

    当选择第一个下拉框时,会联动后面2个下拉框,用的就是onselect方法;

    而初始化选择效果,使用的是onLoadSuccess,设置默认第一个值显示

  • 相关阅读:
    oracle:wm_concat函数与oracle版本
    “default关键字”与“序列化传输”的注意事项
    silverlight:利用telerik中的zip类对字符串进行压缩、解压
    引爆点不是坏事
    Liked:基于FriendFeed API的信息过滤器
    器物的改变
    让Blog成为一个中心?
    环球企业家《信息网站的未来》
    The readings, filtered by social network!
    0509·刘未鹏的TopLanguage聚会[一]
  • 原文地址:https://www.cnblogs.com/zwdx/p/9292887.html
Copyright © 2011-2022 走看看