动态加载后台数据,Ajax达成Select动态增加数据

动态变化二级菜单树:

正文为大家大饱眼福了BootStrap
selectpicker后台动态绑定数据的法门,供大家参谋,具体内容如下

直白上代码
是足以用的,后台代码笔者就不贴了,作者深信不疑后台代码大家都会,直接再次来到json数据,笔者是前者比较差的,所以喜欢把每趟不会的漫天记起来

jquery Ajax完成Select动态增进数据,具体内容如下

<script>
jQuery(function($) {
/**********
获取未处理报警信息总数
**************/
var result;
$.ajax({
async:false,
cache:false,
url: "alarm_findPageAlarm.do",//访问后台接口取数据
// dataType : "json",
type: 'POST',
success: function(data){
result = eval('('+ data +')');
}
});
var alarmCount;
alarmCount = result.total;

/**********

静态代码形式

**********/
/* 
<li>
<a href="#" rel="external nofollow" class="dropdown-toggle">
<i class="icon-desktop"></i>
 设备管理 


<b class="arrow icon-angle-down"></b>
</a>


<ul class="submenu">
<li>
<a href="smartTerminal.html" rel="external nofollow" >
<i class="icon-double-angle-right"></i>
智能终端管理
</a>
</li>
<li>
<a href="labelPrinter.html" rel="external nofollow" >
<i class="icon-double-angle-right"></i>
标签打印机管理
</a>
</li>
</ul>
</li>
*/

/*****从后台取出导航栏数据******/
$.ajax({
async:true,
cache:false,
url: "user_getMenuBuf.do",
// dataType : "json",
type: 'POST',
success: function(result){
var result = eval('('+ result +')');
if(result != undefined && result.length > 0){
var firstMenu = [];
var firstHref = [];
var firstIcon = [];
var subMenu = [];

/******一级导航栏数据*******/
for (var i = 0; i < result.length; i++){
firstMenu[i] = result[i].name;
firstHref[i] = result[i].url;
firstIcon[i] = result[i].iconCls;

/*******添加li标签********/
var menuInfo = document.getElementById("menuInfo");
var firstLi = document.createElement("li");//创建新的 li元素
menuInfo.appendChild(firstLi);//将此li元素添加至页面的ul下一级中
firstLi.style.borderBottom = "0px solid #CCEBF8";//设置li下边框样式

/******设置选中li、离开li时li的样式********/
firstLi.onmouseover = function(){
this.style.background = "#23ACFA";
};
/* firstLi.onmouseover = function(){
this.style.background = "#23ACFA";
}; */
firstLi.onmouseout=function(){
this.style.background = "#0477C0";
};

/******添加a标签**********/
var firstALabel = document.createElement("a");
firstALabel.setAttribute("href", firstHref[i]);//js为新添加的a元素动态设置href属性
firstALabel.setAttribute("class", "dropdown-toggle");
//firstALabel.className = "dropdown-toggle";//兼容性好
firstALabel.setAttribute("target", "content");
//firstALabel.style.backgroundImage="url(./img/17.jpg)"
firstALabel.style.background = "#0477C0";//js为新添加的a元素动态设置背景颜色
// background:url(./img/17.jpg);
firstALabel.style.marginLeft = "20px";//js为新添加的a元素动态设置左外边距
firstLi.appendChild(firstALabel);
firstALabel.onmouseover = function(){
this.style.background = "#23ACFA";
};
/* firstALabel.onmouseover = function(){
this.style.background = "#23ACFA";
}; */
firstALabel.onmouseout=function(){
this.style.background = "#0477C0";
};


/*******添加i标签*******/
var firstILavel = document.createElement("i");
firstILavel.setAttribute("class", firstIcon[i]);
firstILavel.style.color = "#F4F8FF";//动态设置i元素的颜色
firstALabel.appendChild(firstILavel);

/*********添加span标签**********/
var firstSpan = document.createElement("span");
firstSpan.className = "menu-text";
firstSpan.innerHTML = firstMenu[i];//js为新添加的span元素动态设置显示内容
firstSpan.style.fontSize = "14.5px";//js为新添加的span元素动态设置显示内容的字体大小
firstSpan.style.color = "#66D2F1";//js为新添加的span元素动态设置显示内容的字体颜色
firstSpan.style.marginLeft = "15px";
firstALabel.appendChild(firstSpan);

if (firstMenu[i] == "报警信息管理"){
var alarmIcon = document.createElement("span");
alarmIcon.className = "badge badge-important";
alarmIcon.innerHTML = alarmCount; //alarmCount为全局变量,且是通过ajax从后台获取到的
firstSpan.appendChild(alarmIcon);
}

if (result[i].children.length > 0){
var secondHref = [];
var secondMenu = [];
var secondIcon = [];

/*******添加b标签********/
var firstBLabel = document.createElement("b");
firstBLabel.className = "arrow icon-angle-down";
firstBLabel.style.color = "white";
firstALabel.appendChild(firstBLabel);

/********添加ul标签************/
var secondUl = document.createElement("ul");
secondUl.setAttribute("class", "submenu");
firstLi.appendChild(secondUl);

for (var j = 0; j < result[i].children.length; j++){
secondHref[j] = result[i].children[j].url;
secondMenu[j] = result[i].children[j].name;
secondIcon[j] = result[i].children[j].iconCls;

/******添加li标签*******/
var secondLi = document.createElement("li");
secondLi.style.background = "#CCEBF8";
secondUl.appendChild(secondLi);

/*******添加a标签*******/
var secondALabel = document.createElement("a");
secondALabel.setAttribute("href", secondHref[j]);
secondALabel.setAttribute("target", "content");
//secondALabel.style.background = "#CCEBF8";
secondLi.appendChild(secondALabel);

/*******添加i标签**********/
var secondILabel = document.createElement("i");
secondILabel.setAttribute("class", "icon-double-angle-right");
secondALabel.appendChild(secondILabel);

/******添加二级导航信息********/
secondALabel.innerHTML = secondMenu[j];
secondALabel.style.fontSize = "15px";
//secondALabel.style.marginLeft = "60px";
}
}
}
   }
  }, 
 error: function() { 
 alert("加载菜单失败"); 
 } 
});
})
</script>

html部分代码

html代码

1.背景 

静态生成菜单树的代码:

<select class="selectpicker" multiple>      
</select>
<select id="select" style="width : 80px;height : 30px;">
  //下拉框数据动态加载
</select>

近些日子在职业中,境遇了3个有关select的标题。一般景色下,select下拉框中的数据都是一定的恐怕间接在jsp中读取列表值展现。可是,本次要贯彻select与其他选择框联合浮动,也正是要动态增多option数据。查阅了重重资料,终于解决。上面就享受一下,怎么样使用jQuery和Ajax实现select动态增进数据。 

皇家赌场手机版 1

动态加载后台数据,Ajax达成Select动态增加数据。那是贰个下拉多选框,未来要动态往里增加下拉选项。

动态加载后台数据,Ajax达成Select动态增加数据。js代码

皇家赌场手机版,贰.本文代码完毕的是车子型号依据车辆品牌联合浮动展现的坚守。第二,是jsp中的车辆品牌概念,这几个很简短。如下:

生成菜单树的意义:

js代码

$.ajax({ 
   url: "",  //后台webservice里的方法名称 
  contentType: "application/json; charset=utf-8",  
  type: "get", 
  async : true ,
  dataType: "json", 
  success: function (date) { 
    var optionstring = "";
    for (var j = 0; j < date.length;j++) {       
    optionstring += "<option value=\"" + date[j].id + "\" >" +"睡眠次数:"+date[j].limitnumber+"  睡眠时间:"+date[j].sleeptime + "</option>"; 
    $("#select").html("<option value='0'>请选择...</option> "+optionstring);
          } 
        }, 
        error: function (msg) { 
          alert("出错了!"); 
        } 
      }); 
<li class="form-row">

<i class="tip form-tip">*</i>车系
 <select class="form-select" name="modelId">
 </select>
</li>

皇家赌场手机版 2

<script type="text/javascript">
      getOption();
      function getOption(){
        $.ajax({
          type:"get",
          url:"test.json",
          async:true,
          success:function (data) {
            var str = "";
            for(var i = 0;i<data.length;i++){
              str+='<option>'+data[i].value+'</option>'
            }
            $(".selectpicker").html(str);

            $(".selectpicker" ).selectpicker('refresh');
          }
        });
      }
</script>

以上那篇AJAX 动态加载后台数据
绑定select的章程正是我分享给大家的全体内容了,希望能给大家2个参阅,也希望我们多多扶助脚本之家。

然后,是JS代码: 

上述那篇利用js将ajax获取到的后台数据动态加载至网页中的方法就是小编分享给大家的全体内容了,希望能给我们三个参谋,也意在咱们多多补助脚本之家。

关键在于$(“.selectpicker” ).selectpicker(‘refresh’);

您只怕感兴趣的稿子:

  • BootStrap
    selectpicker后台动态绑定数据的办法
  • BootStrap
    selectpicker后台动态绑定数据
  • jquery动态加载select下拉框示例代码
  • 应用js将ajax获取到的后台数据动态加载至网页中的方法
  • jquery
    Ajax完毕Select动态拉长数据
function getModelList(){ 
 var brandId = $("select[name=brandId]").val(); 
 $("select[name=modelId]").empty(); //清空
 $.ajax({url:'/getModelList.do',
 type:"post",
 data:{
 brandId : brandId
 },
 cache: false,
 error:function(){
 }, 
 success:function(data){
 var modelList = data.modelList;
 if(modelList && modelList.length != 0){
 for(var i=0; i<modelList.length; i++){
  var option="<option value=\""+modelList[i].modelId+"\"";
  if(_LastModelId && _LastModelId==modelList[i].modelId){
  option += " selected=\"selected\" "; //默认选中
  _LastModelId=null;
  }
  option += ">"+modelList[i].modelName+"</option>"; //动态添加数据
  $("select[name=modelId]").append(option);
 }
 }
 }
 });
}

你大概感兴趣的篇章:

  • BootStrap
    selectpicker后台动态绑定数据的秘诀
  • BootStrap
    selectpicker后台动态绑定数据
  • jquery动态加载select下拉框示例代码
  • jquery
    Ajax完结Select动态增加数据
  • AJAX 动态加载后台数据
    绑定select的办法

只要未有那句数据是绑定不进去的。

最后,是后台代码

以上正是本文的全体内容,希望对大家的读书抱有帮衬,也期望大家多多支持脚本之家。

@RequestMapping("/getModelList")
 @ResponseBody
 public Map getModelList(Integer brandId) {
 List<SrmsModel> modelList = null;
 try{
 modelList = carInfoManager.getSrmsModelListByBrandId(brandId);
 }catch(Exception e){
 LOGGER.error("获取年租车辆型号异常:{}", e.getMessage());
 }
 Map<String, Object> returnMap = Maps.newHashMap();
 returnMap.put("modelList", modelList);
 return returnMap;
 }

您恐怕感兴趣的小说:

  • BootStrap
    selectpicker后台动态绑定数据
  • jquery动态加载select下拉框示例代码
  • 选用js将ajax获取到的后台数据动态加载至网页中的方法
  • jquery
    Ajax完毕Select动态拉长数据
  • AJAX 动态加载后台数据
    绑定select的主意

上述便是本文的全体内容,希望对大家的读书抱有扶助,也指望大家多多帮助脚本之家。

你或者感兴趣的篇章:

  • BootStrap
    selectpicker后台动态绑定数据的点子
  • BootStrap
    selectpicker后台动态绑定数据
  • jquery动态加载select下拉框示例代码
  • 应用js将ajax获取到的后台数据动态加载至网页中的方法
  • AJAX 动态加载后台数据
    绑定select的办法

Leave a Comment.