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

Posted 2023-03-21

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.boxwidth:300px;padding:20px;margin:20px;border:4px dashed #ccc;
div.box spancolor:#999;font-style:italic;
div.contentwidth:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;
selectwidth: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控件之后

参考技术A var $sel = $("<select id=\"sel\"></select>");
$("body").append($sel);
var $opt = $("<option value=\"1\">1</option>");
$("#sel").append($opt); 参考技术B 的确有这样的效果，但用select标签本身是做不到的，一般是用图层重新和表格重新画一个类似select框的东西平时把表格隐藏并且讲的高度设为0，遇到事件触发时，用动画慢慢把高度拉大。而且select的外观是由系统外观决定的无法改变，一般看到的网页上的很漂亮的下拉菜单，如果不是用flash做的话，都是用其他标签重画的。

如何在jQuery Mobile中动态创建selectmenu？

我试图动态创建一个select元素，但它不是由jQuery Mobile设计的。实现这一目标的正确方法是什么？

JSFiddle

答案

这是一个有效的jsFiddle例子：http://jsfiddle.net/Gajotres/dEXac/

$(document).on('pagebeforeshow', '#index', function(){    
    // Add a new select element    
    $('<select>').attr({'name':'select-choice-1','id':'select-choice-1'}).appendTo('[data-role="content"]');
    $('<option>').attr({'value':'1'}).html('Value 1').appendTo('#select-choice-1');
    $('<option>').attr({'value':'2'}).html('Value 2').appendTo('#select-choice-1');    
    // Enhance new select element
    $('select').selectmenu();
});

另外看看这个ARTICLE，在那里你会发现增强jQuery元素标记的不同方法，或者它可以找到HERE。

另一答案

值得注意的是，这也应该有效:(示例附加两个选项以显示如何添加选项。

$('<select name="sl" id="sl" data-native-menu="false"><option value="clear">That I got</option></select>').appendTo("#output");
$('<option value="clear2">Another That I got</option>').appendTo("#sl");
$('select').selectmenu();

另一答案

这个对我有用

$(document).on('change', "body", function(){
    $( ".ui-selectmenu" ).selectmenu();
});