码迷,mamicode.com
首页 > 其他好文 > 详细

selectmenu搜索下拉框实现多级联动,演示三级联动

时间:2017-11-27 12:47:26      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:其他   pos   jquer   控件   asc   入口   fun   defaults   arc   

注意的是:修改了作者的源码;但是其他地方用到就得注意了,最好在复制个文件里面改;

缺点:选择后,在选择不会显示默认勾选的样式

// selectmenu.js
    /**
     * 控件初始化入口
     * @global
     * @memberof jQuery,bootstrap2,bootstrap3
     * @param option {Object} 初始化参数集
     */
    function Plugin(option) {
        return this.each(function(){
            var $this = $(this),
                data = ‘‘,  //<----注意这里 初始化 data一直让他为空 不缓存
                params = $.extend({}, defaults, $this.data(), data && data.option ,typeof option === ‘object‘ && option);
            if(!data) $this.data(SelectMenu.dataKey,(data =  new SelectMenu(this,params)));
            else{
                if(data.isVisible(data)) data.hideResults(data);
                else data.showMenu(data);
            }
        });
    }
//第一级联动
var proArr = ‘<?=$proArr?>‘; //PHP JSON数据
        var pro_Arr = JSON.parse(proArr);
        var selectMenuData = pro_Arr;
$(
‘#btnMenu‘).click(function(){ //点击第一级 触发插件 $(this).selectMenu({ title:‘<i class="Hui-iconfont">&#xe709;</i>&nbsp;搜索省‘, showField : ‘name‘, keyField : ‘fid‘, //search : true, //orderBy : [‘fid asc‘], //initSelected : 0, arrow : true, //initSelected : 1, data : selectMenuData, eSelect : function(data){ if(data && data.length > 0){ $(‘#btnMenu‘).text(data[0].name); $(‘#city‘).text(‘选择‘); $(‘#hoslist‘).text(‘选择‘); $(‘#hoslist‘).data(‘hosselect‘,‘ ‘); var fid = data[0].fid; changecity(fid); //触发2级 } } }); });
//一级触发完 触发2级获取数据
function changecity(fid)
{
    var url = "<?= site_url(‘hosm/hoss‘) ?>";
    $.ajax({
         type: "POST",
         url: url,
         data:"&fid="+fid,
         success: function(msg)
         {
            var pro_Arr = JSON.parse(msg);
             selectMenuDatab = pro_Arr;
         }
     }) ;
}
//2级点击 触发3级
$(‘#city‘).click(function(){
    $(this).selectMenu({
        title:‘<i class="Hui-iconfont">&#xe709;</i>&nbsp;搜索市‘,
        showField : ‘name‘,
        keyField : ‘fid‘,
        //search : true,
        arrow : true,
        //orderBy : [‘fid asc‘],
        data : selectMenuDatab,
        eSelect : function(data){
            if(data && data.length > 0){
                $(‘#city‘).text(data[0].name);
                var fid = data[0].fid;
                $(‘#hoslist‘).text(‘选择‘);
                $(‘#hoslist‘).data(‘hosselect‘,‘ ‘);
                changlisthos(fid); //调用3级联动

            }
        }
    });
});

3级跟2级一样写,4级也一样写........

selectmenu搜索下拉框实现多级联动,演示三级联动

标签:其他   pos   jquer   控件   asc   入口   fun   defaults   arc   

原文地址:http://www.cnblogs.com/phper8/p/7903410.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!