jquery+php實現select聯動效果(兩級聯動)
阿新 • • 發佈：2018-11-13
|
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"> </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','獲取失敗或者該科目下沒有知識點！'))); } |