ajax級聯(lián)菜單實(shí)現(xiàn)方法實(shí)例分析
更新時(shí)間：2016年11月28日 12:05:34 作者：巴霍巴利
這篇文章主要介紹了ajax級聯(lián)菜單實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了基于ajax與后臺php交互實(shí)現(xiàn)級聯(lián)菜單功能的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了ajax級聯(lián)菜單實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
效果如下：
選擇第一項(xiàng)，第二項(xiàng)、第三項(xiàng)的內(nèi)容跟著改變。
選擇第二項(xiàng)，第三項(xiàng)的內(nèi)容跟著改變。
第三項(xiàng)則不影響第一項(xiàng)和第二項(xiàng)。
有幾點(diǎn)值得提：
1.html到底是前臺拼接還是后臺拼接。
我選擇的是前臺拼接，這樣可以節(jié)省流量，和后臺的資源。這也比較符合程序處理，一般后臺只負(fù)責(zé)提供數(shù)據(jù)。
通過json傳遞給前臺，完了前臺獲取進(jìn)行處理。
ajax函數(shù)
function ajaxgetbigclass(val){
$.ajax({
type:"POST",
async:false,
url:"/default/index/ajax/do/ajaxgetbigclass",
data:"typeid="+val,
success:function(response){
if(response){
res = response;
}else{
res = false;
}
}
});
return res;
}
function ajaxgetsmallclass(val){
$.ajax({
type:"POST",
async:false,
url:"/default/index/ajax/do/ajaxgetsmallclass",
data:"bigclassid="+val,
success:function(response){
if(response){
res = response;
}else{
res = false;
}
}
});
return res;
}
后臺ajax處理代碼
case 'ajaxgetbigclass':
$typeid = trim($this->_getParam('typeid'));
$daoNews = new dao_news();
if(isset($typeid)){
$bigClass = $daoNews->getBigClassByType($typeid,true);
if($bigClass){
$json = json_encode($bigClass);
echo $json;
}else{
echo FALSE;
}
}else{
echo FALSE;
}
break;
case 'ajaxgetsmallclass':
$bigclassid = trim($this->_getParam('bigclassid'));
$daoNews = new dao_news();
if(isset($bigclassid)){
$smallClass = $daoNews->getSmallClassByBigClass($bigclassid,true);
if($smallClass){
$json = json_encode($smallClass);
echo $json;
}else{
echo FALSE;
}
}else{
echo FALSE;
}
break;
調(diào)用ajax函數(shù)，并拼接成html函數(shù)
function setbigclass(id,flag){
var flag = arguments[1] ? arguments[1] : false;//默認(rèn)值
var res = ajaxgetbigclass(id);
//alert(res);
if(res){
myobj = eval(res);
for(var i=0;i<myobj.length;i++){
strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
}
$("#bigclassid").html(strHtml);
}else{
var strHtml = "<option value=''>無子選項(xiàng)</option>";
$("#bigclassid").html(strHtml);
}
if(flag&&res){
return myobj[0].id;
}
}
function setsmallclass(id){
var res = ajaxgetsmallclass(id);
//alert(res);
if(res){
myobj = eval(res);
var strHtml = "<option value=''>請選擇</option>";
for(var i=0;i<myobj.length;i++){
strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
}
$("#smallclassid").html(strHtml);
}else{
var strHtml = "<option value=''>請選擇</option><option value=''>無子選項(xiàng)</option>";
$("#smallclassid").html(strHtml);
}
}
主函數(shù)，事件動作
$(function(){
//ajax級聯(lián)
$("#typeid").change(function(){
var id = $(this).val();
var res = setbigclass(id,true);
if(res){
setsmallclass(res);
}else{
setsmallclass(0);
}
});
$("#bigclassid").change(function(){
var id = $(this).val();
setsmallclass(id);
});
});
2.后臺查詢函數(shù)化。
public function getType($where = false, $order = 'typeid ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){
return $this->getData($this->_typename,$where,$order,$pagesize,$offset,$count,$from,$join,$group);
}
public function getTypeName($flag=false){
$where = array();
$aType = $this->getType($where);
if($aType){
if($flag){
foreach ($aType as $key => $value) {
$type[$key]['id'] = $value['typeid'];
$type[$key]['name'] = $value['typename'];
}
return $type;
}else{
foreach ($aType as $key => $value) {
$type[$value['typeid']] = $value['typename'];
}
return $type;
}
}else{
return false;
}
}
public function getBigClass($where = false, $order = 'BigClassID ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){
return $this->getData($this->_bigname,$where,$order,$pagesize,$offset,$count,$from,$join,$group);
}
public function getBigClassByType($typeid = 60,$flag=false){
$where = array();
$where['BigClass.typeid =?'] = array("type"=>1,"val"=>$typeid);
//print_r($where);exit;
$from = array('BigClassID',"BigClassName","convert(text,BigClassMaster) as BigClassMaster","typeid");
$aBigClass = $this->getBigClass($where, false, false, false, false,$from);
if($aBigClass){
if($flag){
foreach ($aBigClass as $key => $value) {
$bigClass[$key]['id'] = $value['BigClassID'];
$bigClass[$key]['name'] = $value['BigClassName'];
}
return $bigClass;
}else{
foreach ($aBigClass as $key => $value) {
$bigClass[$value['BigClassID']] = $value['BigClassName'];
}
return $bigClass;
}
}else{
return false;
}
}
public function getSmallClass($where = false, $order = 'SmallClassID ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){
return $this->getData($this->_smallname,$where,$order,$pagesize,$offset,$count,$from,$join,$group);
}
public function getSmallClassByBigClass($BigClassID = 221,$flag=false){
$where = array();
$where['SmallClass.BigClassID =?'] = array("type"=>1,"val"=>$BigClassID);
//print_r($where);exit;
$aSmallClass = $this->getSmallClass($where);
if($aSmallClass){
if($flag){
foreach ($aSmallClass as $key => $value) {
$smallClass[$key]['id'] = $value['SmallClassID'];
$smallClass[$key]['name'] = $value['smallclassname'];
}
return $smallClass;
}else{
foreach ($aSmallClass as $key => $value) {
$smallClass[$value['SmallClassID']] = $value['smallclassname'];
}
return $smallClass;
}
}else{
return false;
}
}
這樣就可以多處使用，多種角度使用。
3.前臺js，文件化，同一個功能的js放在一個js文件中。內(nèi)容最后也函數(shù)化。
<script type="text/javascript" src="/js/news/cascade.js"></script>
<tr>
<td width="20%" height="56" align="right" >請選擇分類：</td>
<td width="80%" style="padding:10px;">
<select id="typeid" name="typeid" class=" ffb-input">
<!--{html_options options=$aType selected=$aData.typeid|default:'0'}-->
</select>
>
<select id="bigclassid" name="bigclassid" class=" ffb-input">
<!--{html_options options=$aBigClass selected=$aData.bigclassid|default:'0'}-->
</select>
>
<select id="smallclassid" name="smallclassid" class=" ffb-input">
<option value="">請選擇</option>
<!--{html_options class=" ffb-input" options=$aSmallClass selected=$aData.smallclassid|default:'0'}-->
</select>
</td>
</tr>
這樣會讓文件很清晰。
優(yōu)化后的js
$(function(){
//ajax級聯(lián)
$("#typeid").change(function(){
var id = $(this).val();
setbigclass(id);
});
$("#bigclassid").change(function(){
var id = $(this).val();
setsmallclass(id);
});
});
function setbigclass(id){
var res = ajaxgetbigclass(id);
var strHtml;
if(res){
myobj = eval(res);
for(var i=0;i<myobj.length;i++){
strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
}
$("#bigclassid").html(strHtml);
$("#bigclassid").show().change();
}else{
$("#bigclassid").hide();
$("#smallclassid").hide();
}
}
function setsmallclass(id){
var res = ajaxgetsmallclass(id);
if(res){
myobj = eval(res);
var strHtml = "<option value=''>請選擇</option>";
for(var i=0;i<myobj.length;i++){
strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
}
$("#smallclassid").html(strHtml);
$("#smallclassid").show();
}else{
$("#smallclassid").hide();
}
}
function ajaxgetbigclass(val){
$.ajax({
type:"POST",
async:false,
url:"/default/index/ajax/do/ajaxgetbigclass",
data:"typeid="+val,
success:function(response){
if(response){
res = response;
}else{
res = false;
}
}
});
return res;
}
function ajaxgetsmallclass(val){
$.ajax({
type:"POST",
async:false,
url:"/default/index/ajax/do/ajaxgetsmallclass",
data:"bigclassid="+val,
success:function(response){
if(response){
res = response;
}else{
res = false;
}
}
});
return res;
}
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery+ajax實(shí)現(xiàn)無刷新級聯(lián)菜單示例
- Ajax級聯(lián)菜單實(shí)例代碼
- 前臺JS(jquery ajax)調(diào)用后臺方法實(shí)現(xiàn)無刷新級聯(lián)菜單示例
- AJAX 二級級聯(lián)菜單實(shí)現(xiàn)代碼
- Ajax+Json 級聯(lián)菜單實(shí)現(xiàn)代碼
- AJAX實(shí)現(xiàn)web頁面中級聯(lián)菜單的設(shè)計(jì)
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實(shí)現(xiàn)2級聯(lián)動下拉菜單
- 利用了jquery的ajax實(shí)現(xiàn)二級聯(lián)互動菜單
- ajax讀取數(shù)據(jù)庫內(nèi)容實(shí)現(xiàn)二級聯(lián)動下拉選擇菜單示例
- Javascript級聯(lián)下拉菜單以及AJAX數(shù)據(jù)驗(yàn)證核心代碼
- 基于asp+ajax和數(shù)據(jù)庫驅(qū)動的二級聯(lián)動菜單
- 一個強(qiáng)健 實(shí)用的asp+ajax二級聯(lián)動菜單(有演示和附源程序打包下載)
相關(guān)文章
JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
頁面載入結(jié)束自動調(diào)用js函數(shù)示例
當(dāng)頁面加載完成后自動調(diào)用預(yù)先編好的js函數(shù)，在某些特殊情況下還是比較實(shí)用的，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-09-09
JS實(shí)現(xiàn)的樣式切換功能tableCSS實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的樣式切換功能tableCSS,結(jié)合實(shí)例形式分析了js頁面元素遍歷與樣式動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了Javascript中判斷對象是否為空,本文利用Javascript 中的對象就是一個字典的特性,檢查對象中有沒有鍵值對實(shí)現(xiàn)判斷對象是否為空,需要的朋友可以參考下2015-06-06
基于bootstrap-datetimepicker.js不支持IE8的快速解決方法
下面小編就為大家?guī)硪黄赽ootstrap-datetimepicker.js不支持IE8的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
js 創(chuàng)建一個浮動div的代碼，一般用來指導(dǎo)用戶下面的操作與多條件選擇。點(diǎn)擊一下就可顯示，具體的大家可以自由發(fā)揮。2009-12-12
HBuilderX開發(fā)一個簡單的微信小程序的實(shí)現(xiàn)步驟
本文主要介紹了HBuilderX開發(fā)一個簡單的微信小程序的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要給大家介紹了關(guān)于如何在微信小程序中使用less(最優(yōu)方式)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
使用Javascript（簡稱JS）取得LI里的內(nèi)容(簡單易懂的代碼實(shí)例)2008-12-12
這篇文章主要介紹了解決echarts官網(wǎng)打不開訪問失敗的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10