二级联动 三级联动 四级联动 多级联动

浏览:10563 发布日期:2016/09/01 分类:功能实现 关键字: 二级联动 三级联动 四级联动 多级联动
php thinkphp 实现二级联动 三级联动 四级联动 多级联动 附件带数据库 带选中。
如果不妥地方 欢迎指导,共同学习和进步。
分享是种美德。
页面:<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<!-- 如果不保持选中状态 可以把 <if></if>标签内容都去掉 -->
<!-- 每个select是一级  你可以只有两个select 就是二级联动,三个就是三级联动,四个就是四级联动 以此类推 我做了一个四级联动,一个二级联动 正常 -->

<!-- 地域 -->
<div class="form-group">
    <label class="col-sm-2">实验室地域</label>
  <div class="btn-group" style="margin-bottom: 20px;">
    <select name="region1_id" id="region_0_0" onchange="setregion(0,0)" class="form-control" style="display:inline; width:auto;">
        <option name="selected" selected='selected' value="-1">城市</option>
        <volist name="list" id="vo">
            <option value="{$vo['id']}" <if condition="$row['region1_id'] eq $vo['id']">selected='selected'</if>>{$vo['title']}</option>
        </volist>
    </select>
    <select name="region2_id" id="region_1_0" onchange="setregion(1,0)" class="form-control"  style="display:inline; width:auto;">
        <option name="selected" selected='selected' value="-1">学校</option>
        <!-- 保持上回选中 -->
        <if condition="$row['region2_id'] neq NULL">
          <php>
              $region2 = D('LabTypeRegion')->where(array('id'=>$row['region2_id']))->getField('title');
          </php>
          <option value="{$row['region2_id']}" selected='selected' style="display:none;">{$region2}</option>
        </if>
        <!-- 保持上回选中 -->
    </select>
    <select name="region3_id" id="region_2_0" onchange="setregion(2,0)" class="form-control"  style="display:inline; width:auto;">
        <option name="selected" selected='selected' value="-1">学院</option>
        <!-- 保持上回选中 -->
        <if condition="$row['region3_id'] neq NULL">
          <php>
              $region3 = D('LabTypeRegion')->where(array('id'=>$row['region3_id']))->getField('title');
          </php>
          <option value="{$row['region3_id']}" selected='selected' style="display:none;">{$region3}</option>
        </if>
        <!-- 保持上回选中 -->
    </select>
    <select name="region4_id" id="region_3_0" class="form-control"  style="display:inline; width:auto;">
        <option name="selected" selected='selected' value="-1">实验室</option>
        <!-- 保持上回选中 -->
        <if condition="$row['region4_id'] neq NULL">
          <php>
              $region4 = D('LabTypeRegion')->where(array('id'=>$row['region4_id']))->getField('title');
          </php>
          <option value="{$row['region4_id']}" selected='selected' style="display:none;">{$region4}</option>
        </if>
        <!-- 保持上回选中 -->

    </select>
  </div>
</div>
<script type="text/javascript">//设置默认,页面加载时恢复默认选项。
    function region_default() {
        $("option[value='-1']").attr('selected', 'selected');
    }
    function setregion(num, address_id) {
        var next = num + 1;
        $.ajax({
            type: 'POST',
            //设置json格式,接收返回数组。
            dataType: 'json',
            url: '',
            //ajax传递当前选项的value值,也就是当前的region_id。
            data: 'region_id=' + $('#region_' + num + '_' + address_id).val(),
            success: function(msg) {
                //如果返回值不为空则执行。
                if (msg != null) {
                    var option_str = '';
                    //循环书写下一个select中要添加的内容。并添加name标记。
                    for (var i = 0; i < msg.length; i++) {
                      option_str+='<option name="region_'+next+'"value="'+msg[i].id+'">'+msg[i].title+'</option>';
                    }
                    //删除下一个select中标记name为next的内容。
                    $("option[name='region_" + next + "']").remove();
                    //向下一个select中添加书写好的内容。
                    $('#region_' + next + '_' + address_id).append(option_str);
                } else {
                    //如果返回值为空,则移除所有带标记的option,恢复默认选项。
                    for (var i = next; i <= 4; i++) {
                        $("option[name='region_" + i + "']").remove();
                    }
                }
            }

        })
    }
</script>
<!-- 地域 -->
控制器:    /**
     * [labindex 多级联动]
     * @return [type] [description]
     */
    public function labindex(){
        //实验室地域
        $d=D('LabTypeRegion');
        if(IS_POST){
            if($_POST['region_id']){
                $region_id = $_POST['region_id'];
                $condition['pid'] = $region_id;
                $list = $d->where($condition)->select();
                // echo json_encode($list);
                $this->ajaxReturn($list);
            }
        }else{
            $condition['pid'] = array('neq',0);
            $condition['level'] = 1;
            $list = $d->where($condition)->select();
            $this->assign('list',$list);

        }
        //实验室地域

        $this->display();
    }

附件 多级联动.zip ( 3.31 KB 下载:576 次 )

评论( 相关
后面还有条评论,点击查看>>