如何使用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做的话，都是用其他标签重画的。
