动态加载<select>选项

最新推荐文章于 2026-02-03 02:19:45 发布

原创最新推荐文章于 2026-02-03 02:19:45 发布 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#select

收录于

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用jQuery简化HTML元素操作的方法，通过一个具体示例展示了如何动态地为下拉框添加选项。这种方法适用于需要根据后端数据动态更新用户界面的场景。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select   id="select" class="form-control">
		</select>
	</body>
	<script src="jquery.min.js"></script>
	
	<script>
	/*初始化*/
	$(function(){
		initializeSelect();
	});
	
	
	function initializeSelect() {
	var all="[{'name':'苹果','value':'app'},"  +
		"{'name':'橘子','value':'org'}," +
		"{'name':'香蕉','value':'ban'}]";
	 var jsonarray = eval('('+all+')');
    $.each(jsonarray,function(i,v){
        var html = '<option value="'+v.value+'">'+v.name+'</option>';
        $("#select").append(html);
    });

}
	</script>
</html>