HTML代码:
<div class="form-group">
<label for="c-poolid" class="control-label col-xs-12 col-sm-2">{:__('选择科目')}:</label>
<div class="col-xs-12 col-sm-8">
<select id="select3" data-rule="required" class="form-control selectpicker" name="row[subjectid]">
{foreach name="subjectList" item="vo"}
<option data-type="{$vo.id}" value="{$vo.id}" {in name="key" value=""}selected{/in}>{$vo.name}</option>
{/foreach}
</select>
</div>
</div>
<div class="form-group">
<label for="c-poolid" class="control-label col-xs-12 col-sm-2">{:__('选择知识点')}:</label>
<div class="col-xs-12 col-sm-8">
<select id="select4" data-rule="required" class="form-control" name="row[poolid]">
<option value="none" >请选择知识点</option>
</select>
</div>
</div>jquery代码:
<script src="/assets/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/**获取某个科目下的知识点*/
var select3Ele = document.getElementById("select3");//1. 为<select>元素绑定onchange事件
select3Ele.onchange = function(){
// 将id为city的元素内容清空
var select4 = document.getElementById("select4");
var opts = select4.getElementsByTagName("option");
for(var z=opts.length-1;z>0;z--){
select4.removeChild(opts[z]);
}
// 2. 获取用户当前选择的科目名称的id
var subjectid = select3Ele.value;
$.ajax({
url: 'weike/video/getsubPool',
dataType: "json",
data:{subjectid:subjectid},
async: true,
type: "GET",
success: function(data) {
// 没有数据
if (data['0']==0){
alert(data['1']);
}
// 接收数组
if (data['0']==1) {
var subject_pool = data['1']
//console.log(subject_pool);
// 遍历一维数组列表
for(var i=0;i<subject_pool.length;i++){
//为Select追加一个Option(下拉项)
$("#select4").append("<option value='"+subject_pool[i]['id']+"'>"+subject_pool[i]['name']+"</option>");
}
}
},
error: function() {
//请求出错处理
}
});
};
})
</script>PHP代码:
/**
*获取某科目下所有的知识点
*/
public function getsubPool(){
$subjectid = $this->request->get('subjectid');
$tree = Tree::instance();
$pool = new Pool();
// 获取缓存中的数据
$tree->init($pool->getPoolCache(), 'pid');// 获取缓存中知识点列表数据
$childArr = $tree->getChildren($subjectid,true);// 读取指定节点的所有孩子节点
$tree->init($childArr, 'pid');
$subject_poolList = $tree->getTreeList($tree->getTreeArray(0), 'name');// 将某个科目下所有的知识点以树状结构的二维数组返回
if (count($subject_poolList)>=1){
exit(json_encode(array('1',$subject_poolList)));
}
exit(json_encode(array('0','获取失败或者该科目下没有知识点!')));
}
|
jquery+php实现select联动效果(两级联动)
最新推荐文章于 2021-12-22 09:31:04 发布