php、html结合实现二级联动。
一对一源码在php开发中我们经常会遇到一些功能需要二级联动,二级联动就是说我们在选择一级select不同的option,下面的二级option的属性值在进行相应的变动。简言之就是两个select标签,选择第一个的时候,第二个自动带出相关联的数据。
一、Html
1.在一对一源码创建两个下拉框标签
上级标签读取返回数据,循环显示;
下级标签不设置数据值
代码如下:
<div class="control-group">
<label class="control-label">一级(ID)</label>
<div class="controls">
<select class="select_2" name="guild_id" id="guildid">
<option value="">请选择一级</option>
<volist name="guildlists" id="v">
<option value="{$v['id']}">{$v.name}</option>
</volist>
</select>
<span class="form-required">*</span>
</div>
</div>
<div class="control-group">
<label class="control-label">二级(ID)</label>
<div class="controls">
<select class="select_2" name="manage_uid" id="manageuid">
<option value="">请选择二级</option>
</select>
<span class="form-required">*</span>
</div>
</div>
2.在一对一源码点击上级下拉框切换数据:添加click事件,回调读取下级数据列表,ajax返回json
代码如下:
<script type="text/javascript" src="__PUBLIC__home/js/jquery.js"></script>
<script>
(function(){
$("#guildid").change(function(){ //监听下拉列表的change事件
var address = $(this).val(); //获取下拉列表选中的值
//发送一个post请求
$.ajax({
type:'post',
url:'/index.php?g=Admin&m=Guildmanage&a=getManagelists',
data:{guildid:address},
dataType:'json',
success:function(data){ //请求成功回调函数
var status = data.status; //获取返回值
var address = data.data;
if(status == 200){ //判断状态码,200为成功
var option = '';
//循环获取返回值,并组装成html代码
for(var i=0;i<address.length;i++){
option +='<option value="'+address[i].user_id+'">'+address[i].user_nicename+'</option>';
}
}else{
//默认值
var option = '<option>请选择下级</option>';
}
//js刷新第二个下拉框的值
$("#manageuid").html(option);
},
});
});
})()
</script>
二、Php
一对一源码中Ajax访问php地址,获取下级数据列表,返回json
//根据上级获取下级信息
function getManagelists(){
$key = $_POST['guildid']; //获取值
//下级列表
$managelist=M("role_user")->field("user_id,guild_id")->where("guild_id=".$key." and role_id=6")->select();//下级
//可添加需要的逻辑代码
$result['status'] = 200;
$result['data']= $managelist;
echo json_encode($result); //返回JSON数据
exit;
}
到此,php实现二级联动完成。
这篇文章主要介绍了PHP+html实现二级联动功能,涉及php结合html的数据交互与页面元素动态操作相关实现技巧,需要的朋友可以参考下。
声明:本篇文章为小编原创文章,转载请注明出处及作者。