<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 22:51:33
        文檔

        ajax實現select三級聯動效果

        ajax實現select三級聯動效果:本文利用ajax技術從數據庫中獲取數據,動態實現select三級聯動,效果圖如下: 前端js代碼如下: <script type=text/javascript src=jquery/jquery-1.9.1.min.js></script> <script type=tex
        推薦度:
        導讀ajax實現select三級聯動效果:本文利用ajax技術從數據庫中獲取數據,動態實現select三級聯動,效果圖如下: 前端js代碼如下: <script type=text/javascript src=jquery/jquery-1.9.1.min.js></script> <script type=tex

        本文利用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>

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

        文檔

        ajax實現select三級聯動效果

        ajax實現select三級聯動效果:本文利用ajax技術從數據庫中獲取數據,動態實現select三級聯動,效果圖如下: 前端js代碼如下: <script type=text/javascript src=jquery/jquery-1.9.1.min.js></script> <script type=tex
        推薦度:
        標簽: 下拉框 select ajax
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 国产精品冒白浆免费视频| 免费精品人在线二线三线区别| 亚洲成a人片在线观看老师| 你懂得的在线观看免费视频| mm1313亚洲精品国产| 亚洲av无码专区在线播放| baoyu116.永久免费视频| 亚洲线精品一区二区三区影音先锋| 青青操免费在线视频| 香蕉视频在线观看亚洲| 免费人成又黄又爽的视频在线电影| 24小时日本韩国高清免费| 亚洲国产成人乱码精品女人久久久不卡| 激情小说亚洲图片| 亚洲国产小视频精品久久久三级 | 老外毛片免费视频播放| 精品无码人妻一区二区免费蜜桃| 亚洲综合国产精品| a级毛片免费高清毛片视频| 久久久无码精品亚洲日韩蜜桃 | 亚洲国产成人综合精品| 亚洲三级高清免费| 91在线亚洲综合在线| 国产桃色在线成免费视频 | 国产黄色免费观看| 国产国拍亚洲精品mv在线观看| 久久久99精品免费观看| 久久久久亚洲av毛片大| 日韩精品无码专区免费播放| 亚洲熟妇AV一区二区三区浪潮 | 亚洲人成电影网站免费| 亚洲成AV人网址| 84pao国产成视频免费播放| 亚洲国产成人久久精品软件| 亚洲一级特黄无码片| 久青草国产免费观看| 亚洲视频小说图片| 猫咪免费人成网站在线观看| 成人婷婷网色偷偷亚洲男人的天堂| 亚洲乱码国产乱码精品精| 最近中文字幕免费mv视频8|