国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

使用ajax實現select三級聯動功能

來源:懂視網 責編:小采 時間:2020-11-27 19:57:37
文檔

使用ajax實現select三級聯動功能

使用ajax實現select三級聯動功能:這次給大家帶來使用ajax實現select三級聯動功能,使用ajax實現select三級聯動功能的注意事項有哪些,下面就是實戰案例,一起來看一下。本文利用ajax技術從數據庫中獲取數據,動態實現select三級聯動,效果圖如下:前端js代碼如下:<script ty
推薦度:
導讀使用ajax實現select三級聯動功能:這次給大家帶來使用ajax實現select三級聯動功能,使用ajax實現select三級聯動功能的注意事項有哪些,下面就是實戰案例,一起來看一下。本文利用ajax技術從數據庫中獲取數據,動態實現select三級聯動,效果圖如下:前端js代碼如下:<script ty
這次給大家帶來使用ajax實現select三級聯動功能,使用ajax實現select三級聯動功能的注意事項有哪些,下面就是實戰案例,一起來看一下。

本文利用ajax技術從數據庫中獲取數據,動態實現select三級聯動,效果圖如下:

前端js代碼如下:

<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type:"get",
dataType:"text",
url:"GetItemAction?itemlevel=1",
 success:function(data){
 // 由JSON字符串轉換為JSON對象
 var objJSON=eval("("+data+")");
 var len=objJSON.itemInfo.length; 
 var objSelect=document.getElementById("firstlevel");
 for(var i=0;i<len;i++){
 var op=new Option(objJSON.itemInfo[i].itemname,objJSON.itemInfo[i].itemcode);
 objSelect.add(op);
 } 
 },
error: function (XMLHttpRequest, textStatus, errorThrown) { 
 alert(errorThrown); 
 }
});
});
//顯示二級分類
function firstlevel_Click(){
var objfirst=document.getElementById("firstlevel");
var index=objfirst.selectedIndex; //選中索引 
var itemcode=objfirst.options[index].value; //選中值
if(itemcode==0){
alert("請選擇事件類別");
return;
}
// 刪除二級分類保留第一個
var objsecond=document.getElementById("secondlevel");
for(var i=objsecond.options.length-1;i>0;i--){
objsecond.options.remove(i);
}
// 刪除三級分類保留第一個
var objthird=document.getElementById("thirdlevel");
for(var i=objthird.options.length-1;i>0;i--){
objthird.options.remove(i);
}
$.ajax({
type:"get",
dataType:"text",
url:"GetItemAction?itemlevel=2&itemcode="+itemcode,
 success:function(data){
 // 由JSON字符串轉換為JSON對象
 var objJSON=eval("("+data+")");
 var len=objJSON.itemInfo.length;
 var objSelect=document.getElementById("secondlevel");
 for(var i=0;i<len;i++){
 var op=new Option(objJSON.itemInfo[i].itemname,objJSON.itemInfo[i].itemcode);
 objSelect.add(op);
 } 
 },
error: function (XMLHttpRequest, textStatus, errorThrown) { 
 alert(errorThrown); 
 }
});
}
//顯示三級分類
function secondlevel_Click(){
var objsecond=document.getElementById("secondlevel");
var index=objsecond.selectedIndex; //選中索引 
var itemcode=objsecond.options[index].value; //選中值
if(itemcode==0){
alert("請選擇事件類別");
return;
}
// 刪除三級分類保留第一個
var objthird=document.getElementById("thirdlevel");
for(var i=objthird.options.length-1;i>0;i--){
objthird.options.remove(i);
}
$.ajax({
type:"get",
dataType:"text",
url:"GetItemAction?itemlevel=3&itemcode="+itemcode,
 success:function(data){
 // 由JSON字符串轉換為JSON對象
 var objJSON=eval("("+data+")");
 var len=objJSON.itemInfo.length;
 var objSelect=document.getElementById("thirdlevel");
 for(var i=0;i<len;i++){
 var op=new Option(objJSON.itemInfo[i].itemname,objJSON.itemInfo[i].itemcode);
 objSelect.add(op);
 } 
 },
error: function (XMLHttpRequest, textStatus, errorThrown) { 
 alert(errorThrown); 
 }
});
}

部分html代碼

<table class="table-exposure">
 <tr>
 <td height="40">
 <select id="firstlevel" onchange="firstlevel_Click()" style="width:99%;font-size:1em;">
 <option value="0">請選擇事件大類</option>
 </select> 
 </td>
 </tr>
 <tr>
 <td height="40">
 <select id="secondlevel" onchange="secondlevel_Click()" style="width:99%;font-size:1em;">
 <option value="0">請選擇事件小類</option>
 </select>
 </td>
 </tr>
 <tr>
 <td height="40">
 <select id="thirdlevel" style="width:99%;font-size:1em;">
 <option value="0">請選擇事件類別</option>
 </select>
 </td>
 </tr>
 </table>

相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

推薦閱讀:

用ajax實現微信網頁授權登錄的步奏(附代碼)

判斷身份證與銀行卡號格式的正則怎么寫

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

使用ajax實現select三級聯動功能

使用ajax實現select三級聯動功能:這次給大家帶來使用ajax實現select三級聯動功能,使用ajax實現select三級聯動功能的注意事項有哪些,下面就是實戰案例,一起來看一下。本文利用ajax技術從數據庫中獲取數據,動態實現select三級聯動,效果圖如下:前端js代碼如下:<script ty
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 亚洲欧美综合视频 | 亚洲视频一二区 | 热九九精品 | 国产精品久久毛片蜜月 | 欧美亚洲综合图区在线 | 精品国内自产拍在线视频 | 国内精品久久久久久久97牛牛 | 麻豆91视频| 国产成人免费高清激情明星 | 不卡一区二区在线观看 | 四虎影视最新地址 | 日本成人一区二区 | 丝袜国产一区 | 欧美日韩一区二区三区久久 | 激情一区二区三区成人 | 成人免费一区二区三区 | 图片亚洲va欧美va国产综合 | 亚洲精品免费视频 | 国产精品久久久久9999小说 | 欧美视频精品一区二区三区 | 伊人情人综合成人久久网小说 | 中文国产成人精品久久一 | 在线观看亚洲一区二区 | 国产一区二区三区视频 | 久久精品亚洲一区二区三区浴池 | 国产码欧美日韩高清综合一区 | 麻豆精品国产 | 久草伦理 | 国产69精品久久 | 亚洲一级二级三级 | 日韩欧美高清在线 | 自拍偷拍亚洲区 | 久久香蕉热 | 国产视频网 | 成人国内精品久久久久影院 | 日韩成人免费在线视频 | 亚洲成人99 | 欧美一区二区高清 | 欧美性一区二区三区五区 | 中文字幕一区久久久久 | 久久久久久久久久久9精品视频 |