• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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;ilen;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=2itemcode="+itemcode,
     success:function(data){
     // 由JSON字符串转换为JSON对象
      var objJSON=eval("("+data+")");
     var len=objJSON.itemInfo.length;
     var objSelect=document.getElementById("secondlevel");
     for(var i=0;ilen;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=3itemcode="+itemcode,
     success:function(data){
     // 由JSON字符串转换为JSON对象
      var objJSON=eval("("+data+")");
     var len=objJSON.itemInfo.length;
     var objSelect=document.getElementById("thirdlevel");
     for(var i=0;ilen;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>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • Ajax实现省市区三级联动
    • 原生javascript AJAX 三级联动的实现代码
    • 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
    • jQuery ajax实现省市县三级联动
    • 三级联动省市ajax的代码
    上一篇:Ajax请求发送成功但不进success的解决方法
    下一篇:Struts2和Ajax数据交互示例详解
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    ajax实现select三级联动效果 ajax,实现,select,三级,联动,