使用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方法获取下拉列表值的主要内容,如果未能解决你的问题,请参考以下文章
尝试在.net核心中绑定下拉列表时在ajax jquery中获取空对象列表
在 2 个不同的 div ID 中有 2 个同名的 HTML 下拉列表,那么如何使用 AJAX/jQuery 提交特定 div ID 的下拉值