Question

如何使用jquery动态创建一个select控件

Answer 1

jquery文档操作的append()或 appendTo()方法可以在被选元素的结尾插入内容，因此可用于动态创建select控件

$("div").append("<select></select>");          // 在已经存在的div标签下创建select元素
$("<option></option>").appendTo($("select"));  // 为select元素添加option选项

实例演示：动态创建一个含有两个选项——“黑”“白”的select控件，并默认选中“白”这个选项

示例代码如下

1. 创建Html元素

   <div class="box">
   	<span>点击按钮后创建select标签，并默认选中“白”这个选项：</span><br>
   	<div class="content"></div>
   	<input type="button" value="创建select标签">
   </div>

2. 设置css样式

   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
   div.box span{color:#999;font-style:italic;}
   div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
   select{width:150px;height:30px;border:1px solid #6699FF;}

3. 编写jquery代码

   $(function(){
   	$("input:button").click(function() {
   		// 创建select
   		$("div.content").append("<select></select>");
   		// 添加选项
   		$("<option></option>").val('0').text("黑").appendTo($("select"));
   		$("<option></option>").val('1').text("白").appendTo($("select"));
   		// 设置默认选项
   		$("select").val('1');
   	})
   })

4. 观察效果

• 初始状态

  

• 点击按钮创建select控件之后

  

Answer 2

var $sel = $("<select id=\"sel\"></select>");
$("body").append($sel);
var $opt = $("<option value=\"1\">1</option>");
$("#sel").append($opt);

Answer 3

的确有这样的效果，但用select标签本身是做不到的，一般是用图层重新和表格重新画一个类似select框的东西平时把表格隐藏并且讲的高度设为0，遇到事件触发时，用动画慢慢把高度拉大。而且select的外观是由系统外观决定的无法改变，一般看到的网页上的很漂亮的下拉菜单，如果不是用flash做的话，都是用其他标签重画的。