ajax动态加载下拉框数据

下拉框—–ajax动态加载数据

嗨!这是我发表的第一篇博客,希望对大家有所帮助,有什么不对的地方还望校正!

jsp页面(类型一)

<select class="form-control" name="orgName" id="select_orgName">
       <option>--请选择--option> 
select>

获取的数据是真实数据,是数据中的数据,然后从后台进行数据回调

ajax 代码块

上个图片,这里断了个debugger,查看回调的数据,数据显示有两条。
不过这里的warehouse,我也一直没有弄明白,找到很多都是这样写的,百度说了一大堆,反正就是一种解决方案
ajax动态加载下拉框数据_第1张图片

设置默认值(类型二)

当在作修改操作信息的时候,先需要查询所有的信息,这是页面中选择框就需要进行判断其中一个值是默认的

ajax 代码块 —— 修改操作
//'修改操作,默认选中'
  window.onload=function(){
          var selectVal=${users.orgName}  //"这不用管,这是获取值,拿到你自己的值"
          $.ajax({
                 timeout: 3000,
                 async: false,
                 type: "POST",
                 url: "${webroot}/user/orgList",
                 dataType: "json",
                 data: {
                        warehouse: $("#select_orgName").val(),   //'选择框id'
                 },
                 success: function (data) {
                     for (var i = 0; i < data.length; i++) {
                         $("#select_orgName").append(" + data[i].orgName + "");

                              //'在循环中设置 默认选中  为true'
                              if (select.options[i].value == selectVal){  
                                select.options[i].selected = true;  
                              }  
                     }
                }
          });
    }

上面 取值var selectVal= ${users.orgName},有时候来说是错误的写法,这时候需要改变一下。我们把${users.orgName}这个值放到一个隐藏的标签里面,然后根据标签id获取值

页面: type="hidden" name="orgName" id="selVal" value="${users.orgName}" />

js:  var selectVal=("#selVal").val();

对默认值的选中可以查看我另外一篇,地址:https://blog.csdn.net/tt336798/article/details/81559946

需要对value值进行判断(类型三)

有时候,数据库获取的值是int型,但是页面显示的值却是String类型,反正就是各种奇葩,两种不同的值,第一想法是判断。对,就是判断,没错!!!
这里是js

 <select class="form-control" name="orgName" id="checke_val">

 select>

上面 这里不需要你写任何option标签,当然也可以像前面写上也可以,如果写了后面就不用写了

ajax 代码块
window.onload=function(){
           $.ajax({
                type:"post",
                async:false,
                url:"${webroot}/admin/listType",
                dataType:"json",
                data: {
                     warehouse: $("#checke_val").val(),
                 },
                success:function(rdata){
                   $("#checke_val").append($(""));
                    var str="";
                    for(var i=0;iif(rdata[i].isLottery==1){
                            str="已中奖";
                          }else if(rdata[i].isLottery==0){
                            str="未中奖";
                          }
                     $("#checke_val").append("+str+"");
                    }  
                }
           });
        }   

以上是我个人学到技术的分享,以后有好的技术还会继续分享出来!!!

  • 下拉框—–ajax动态加载数据
    • jsp页面(类型一)
          • ajax 代码块
    • 设置默认值(类型二)
          • ajax 代码块 —— 修改操作
      • 需要对value值进行判断(类型三)
            • ajax 代码块

你可能感兴趣的:(下拉框动态加载数据,前端,动态加载)