<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答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
        主站蜘蛛池模板: 欧美日韩亚洲精品| 亚洲国产日韩综合久久精品| 最好2018中文免费视频| 精品国产免费一区二区| 在线看无码的免费网站| 亚洲AV无码乱码国产麻豆| 亚洲国产韩国一区二区| 国产亚洲情侣久久精品| 1区2区3区产品乱码免费| 亚洲天天做日日做天天看| 最近中文字幕大全中文字幕免费| 亚洲邪恶天堂影院在线观看| 久久久久久精品成人免费图片| 亚洲人成网站日本片| 无码免费午夜福利片在线| 亚洲人av高清无码| 亚洲国产成人久久笫一页| 亚洲无砖砖区免费| 日本一区二区三区免费高清| 亚洲国产成人精品无码区二本| 免费在线观看一级毛片| 亚洲欧洲AV无码专区| 国产99视频精品免费视频7| 高清永久免费观看| 亚洲视频在线观看网址| 在线成人a毛片免费播放| 国产福利电影一区二区三区,免费久久久久久久精 | 亚洲精品无码不卡在线播HE| 最新亚洲人成无码网www电影| heyzo亚洲精品日韩| 国产精品亚洲四区在线观看| 日本媚薬痉挛在线观看免费| 韩国免费A级毛片久久| 亚洲酒色1314狠狠做| 国产精品成人四虎免费视频| a在线观看免费视频| 亚洲人成电影网站色| 亚洲国产成人精品无码区在线观看| 免费不卡视频一卡二卡| 九九视频高清视频免费观看 | 精品国产免费一区二区三区香蕉|