JQuery从后台获取数据绑定到HTML标签select

最新推荐文章于 2021-06-16 23:46:39 发布

原创最新推荐文章于 2021-06-16 23:46:39 发布 · 1w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#select #jquery #ajax

JavaScript基础篇专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用jQuery实现从后台获取数据，并将其填充到HTML的<select>元素中的示例。该示例通过POST方式请求指定URL，获取JSON格式的数据，然后遍历这些数据来动态创建并填充下拉选项。

jquery代码：

<script type="text/javascript">
		$(document).ready(function(){  
			init(); 
		});

       	/**
        *初始化页面
        */
	   function init(){
		   $.ajax({
				type : "POST", //使用post方法访问后台
				dataType : "json", //返回json格式的数据
				url: "platform/jspModuleAction/getLookupTypeList", //要访问的后台地址
				data : {
					      "type": "KM_SECRET_LEVEL"
					   },
				complete : function() {}, 
				success : function(result) {//result为返回的数据
				 	$("#secretLevel").html("");
				 	$("#secretLevel").append($("<option value=\"0\">－请选择密级－</option>"));
				 	for(var i=0; i<result.length; i++){
						$("#secretLevel").append($("<option value=\""+result[i].LOOKUP_CODE+"\">"+result[i].LOOKUP_NAME+"</option>"));
					}
				}
			});
	   }
	</script>

select标签：

<select id="secretLevel" name="from" reg="[^0]" tip="一定要选择哟">
     <option value="0">－－请选择你来自哪里－－</option>
     <option value="a">北京</option>
     <option value="b">上海</option>
     <option value="c">四川</option>
   </select>