使用jquery的ajax方法获取下拉列表值

Posted mike11

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jquery的ajax方法获取下拉列表值相关的知识,希望对你有一定的参考价值。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,用户体验非常好。

下面介绍两种动态加载DropDownList值的方法。

第一种:

View层

<select id="funcNum" name="funcNum"></select>
<script>
$(document).ready(function() {
 showFuncId();
}
function showFuncId(){
 $(‘#funcNum‘).empty();
 var ciValue = $(‘#funcNum‘); 
 ciValue.append(‘<option value="">Pls Select</option>‘);  
 $.ajax({ 
        url : u,  //your actual url
        type : ‘post‘,  
        dataType : ‘json‘,  
        success : function (opts) {  
               if (opts && opts.length > 0) {  
                   var html = [];  
                    for (var i = 0; i < opts.length; i++) {  
                        html.push(‘<option value="‘+opts[i].id+‘">‘+opts[i].desc+‘</option>‘); 
                      }  
                    ciValue.append(html.join(‘‘));  
                }  
          }  
 });  
}
</script>

Controller层

             response.setContentType("application/json");  
	         response.setCharacterEncoding("utf-8");  
	         PrintWriter writer = response.getWriter();  
	         net.sf.json.JSONArray array = JSONArray.fromObject(new ArrayList());//The list that contains actual data,use a new arrayList instead here
             writer.append(array.toString());  
	         return null;

  

  

第二种:

View层

<select id="funcNum" name="funcNum"></select>
<script>
$(function(){
   $.ajax({ 
      type: ‘POST‘, 
      url:url;//your actual url
      dataType: ‘json‘, 
      cache: false,
      async:false,
      success:function(data) { 
          $(‘#funcNum‘).get(0).options.length = 0; 
          $(‘#funcNum‘).append(‘<option value="">Pls Select</option>‘);
            $.each(data, function(i, obj) {
                var option = $(‘<option />‘);
                option.val(obj.id);
                option.text(obj.desc);
                $(‘#funcNum‘).append(option);
              });
        },         
        error: function() { 
            alert("Error while getting vehicle type results"); 
        }
    });
});
</script>

  

 

Controller层

             response.setContentType("application/json");  
	         response.setCharacterEncoding("utf-8");  
	         PrintWriter writer = response.getWriter();  
	         net.sf.json.JSONArray array = JSONArray.fromObject(new ArrayList());//The list that contains actual data,use a new arrayList instead here
             writer.append(array.toString());  
	         return null;

  

 

  

以上是关于使用jquery的ajax方法获取下拉列表值的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery AJAX 将数据库默认值添加到下拉列表

从使用 AJAX 填充的下拉列表中获取值

尝试在.net核心中绑定下拉列表时在ajax jquery中获取空对象列表

在 2 个不同的 div ID 中有 2 个同名的 HTML 下拉列表,那么如何使用 AJAX/jQuery 提交特定 div ID 的下拉值

从文本字段复制值以选择下拉列表[重复]

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表