菜单

AJAX 动态加载后台数据 绑定select的法子

2018年11月16日 - Ajax

直接上代码
是可据此之,后台代码我就是无糊了,我深信不疑后台代码大家都见面,直接返回json数据,我是前者比较差之,所以爱管每次不见面的凡事笔记起

 <select id="select">
 <!--下拉框数据动态加载-->
 </select>

html代码

 js:(使用jquery) 

<select id="select" style="width : 80px;height : 30px;">
  //下拉框数据动态加载
</select>
$(document).ready(function () { //此处页面打开即请求api
                $.ajax({
                    type:'GET',
                    url:"{:url('Room/houseData')}",
                    contentType: "application/json; charset=utf-8",
                    async : true ,
                    dataType: "json",
                    success: function (date) {
                        var optionstring = "";
                        for (var j = 0; j < date.length;j++) {
                            console.log(date[j].house_name);
                            console.log(date[j].id);
                            optionstring += "<option value=\"" + date[j].id + "\" >" +date[j].house_name+" " + "</option>";
                            $("#select").html("<option value='0'>请选择...</option> "+optionstring);
                        }
                    },

                    error: function (msg) {
                        layer.msg('数据出错了!!');
                    }
                });
            });

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("出错了!"); 
        } 
      }); 

图片 1

以上就首AJAX 动态加载后台数据
绑定select的方式就是不怎么编分享给大家的全部内容了,希望能够吃大家一个参照,也盼大家多支持脚本的小。

汝或许感兴趣的章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图