如果不妥地方 欢迎指导,共同学习和进步。
分享是种美德。
页面:
<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 次 )