jquery 动态select实现

最新推荐文章于 2022-12-09 17:15:31 发布

qinshouxin

最新推荐文章于 2022-12-09 17:15:31 发布

阅读量147

点赞数

分类专栏： javascript 文章标签： jQuery json Java XHTML HTML ViewUI

javascript 专栏收录该内容

1 篇文章

订阅专栏

看网上很多动态的下拉菜单，都是用的div实现。
我这个是对select进行更改，更简单一些。

html文件


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">  
  <script type="text/javascript" charset="utf-8" src="jquery.js"></script> 
</head>
<body>
  <div>
  <select id="input1" name="input1" type="text" style="width:100px" ></select>
  </div>
</body>
<script type="text/javascript">
  $("#input1").focus(function(){
  	//$("#input1").empty();
  	//看是否有选项，有则不加载
  	if(this.options.length>0)
  	    return ;
  	//加载动态数据，这里直接用js文件，里面是个json数据，可以从后台得到
		$.getJSON("xin.js",function(data){
			 $.each(data.items,function(i,item){
			 	 $("<option value='"+item.dm+"'>"+item.mc+"</option>").appendTo("#input1");
			});
	  });
 });

</script>
</html>

js文件


{"items":[{"dm":"1","mc":"werwe"},{"dm":"2","mc":"122"}]}