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

发布网友发布时间：2022-04-23 05:32

共3个回答

热心网友时间：2022-04-18 02:43

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

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

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

示例代码如下

创建Html元素

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

设置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;}

编写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');
})
})

观察效果

初始状态

点击按钮创建select控件之后

热心网友时间：2022-04-18 04:01

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

热心网友时间：2022-04-18 05:36

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