ajax动态加载 select 下拉框 数据

6 篇文章 0 订阅

方法一:
页面:

<select class="form-control" name="orgName" id="select_orgName">
       <option>--请选择--</option> <!-- 这个option也可以写在ajax中-->
</select>

在这里插入图片描述

方法二:设置默认值

页面:

 <input type="hidden" name="orgName" id="selVal" value="${users.orgName}" />

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

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("<option >" + data[i].orgName + "</option>");

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

方法三:对value值进行判断

页面:

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

 </select>

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($("<option value=''>全部</option>"));
                    var str="";
                    for(var i=0;i<rdata.length;i++){
                          if(rdata[i].isLottery==1){
                            str="已中奖";
                          }else if(rdata[i].isLottery==0){
                            str="未中奖";
                          }
                     $("#checke_val").append("<option value="+rdata[i].isLottery+">"+str+"</option>");
                    }  
                }
           });
        }   

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,在MySQL数据库中创建一个表,记录下拉框的选项。例如,可以创建一个名为“options”的表,其中包含两列:id和name。id是选项的唯一标识符,name是选项的文本。 其次,在servlet中编写代码来获取选项列表。可以创建一个名为“OptionsServlet”的servlet,该servlet可以使用DAO来从数据库中检索选项列表。在servlet中可以使用以下代码片段: ``` List<Option> options = OptionDAO.getOptions(); //获取选项列表 request.setAttribute("options", options); //将选项列表设置为请求属性 request.getRequestDispatcher("page.jsp").forward(request, response); //转发到JSP页面 ``` 在这里,我们将选项列表设置为请求属性,并将请求转发到JSP页面,以便在页面上显示选项列表。 接下来,在JSP页面中使用ajax和jQuery来加载选项列表。可以在页面上使用<select>标记来创建下拉框。然后,使用以下代码片段来使用ajax和jQuery填充下拉框: ``` $.ajax({ url: "OptionsServlet", dataType: "json", success: function(data) { $.each(data, function(index, option) { $("select").append("<option value='" + option.id + "'>" + option.name + "</option>"); }); } }); ``` 在这里,我们使用ajax来获取从servlet返回的JSON数据,然后使用jQuery循环遍历数据并将选项添加到下拉框中。 最后,需要在servlet中添加一个方法来返回选项列表的JSON表示。可以使用以下代码片段: ``` List<Option> options = OptionDAO.getOptions(); //获取选项列表 String json = new Gson().toJson(options); //将选项列表转换为JSON response.setContentType("application/json"); //设置响应内容类型为JSON response.setCharacterEncoding("UTF-8"); //设置响应字符编码为UTF-8 response.getWriter().write(json); //将JSON数据写入响应 ``` 在这里,我们使用Gson库将选项列表转换为JSON,并将JSON写入响应。最后,需要设置响应内容类型和字符编码。 这样,就可以使用MySQL数据库和ajax来循环选择下拉框,并连接servlet和DAO。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值