jquery+php实现select联动效果(两级联动)

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','获取失败或者该科目下没有知识点!')));
    }  

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的基于 jQuery 和 Ajax 实现省市县三级联动的示例代码: HTML 代码: ```html <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区县</option> </select> ``` JavaScript 代码: ```javascript $(function() { // 加载省份列表 $.ajax({ url: 'province.php', type: 'GET', dataType: 'json', success: function(data) { $.each(data, function(index, province) { $('#province').append('<option value="' + province.id + '">' + province.name + '</option>'); }); } }); // 加载城市列表 $('#province').change(function() { var provinceId = $(this).val(); if (provinceId != '') { $.ajax({ url: 'city.php', type: 'GET', dataType: 'json', data: {provinceId: provinceId}, success: function(data) { $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区县</option>'); $.each(data, function(index, city) { $('#city').append('<option value="' + city.id + '">' + city.name + '</option>'); }); } }); } else { $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区县</option>'); } }); // 加载区县列表 $('#city').change(function() { var cityId = $(this).val(); if (cityId != '') { $.ajax({ url: 'district.php', type: 'GET', dataType: 'json', data: {cityId: cityId}, success: function(data) { $('#district').empty().append('<option value="">请选择区县</option>'); $.each(data, function(index, district) { $('#district').append('<option value="' + district.id + '">' + district.name + '</option>'); }); } }); } else { $('#district').empty().append('<option value="">请选择区县</option>'); } }); }); ``` 省份列表数据接口(province.php)返回 JSON 数据格式: ```json [ {"id": "110000", "name": "北京市"}, {"id": "120000", "name": "天津市"}, // 省份数据... ] ``` 城市列表数据接口(city.php)根据省份 ID 返回 JSON 数据格式: ```json [ {"id": "110100", "name": "北京市"}, {"id": "110200", "name": "县城市"}, // 城市数据... ] ``` 区县列表数据接口(district.php)根据城市 ID 返回 JSON 数据格式: ```json [ {"id": "110101", "name": "东城区"}, {"id": "110102", "name": "西城区"}, // 区县数据... ] ``` 以上是一个简单的 jQuery 和 Ajax 实现省市县三级联动的示例代码,你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值