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

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:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

select{width:150pxheight:30pxborder: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控件之后

1.可以动态添加多个下拉框,可减少下拉框

2.选中第一个下拉框的任意一个值，同时第三个下拉框的值跟着改变，显示对应的数据。

ps:what?光动态添加就足以。。。。赋值还不能直接赋，而是添加下拉时就赋值。。。。。经过百般折磨，头发掉了n根，最终通过巧妙的思路解决了，在此记录下。若对你有所帮助，点赞加关注吧！后续及时更新。

第一个下拉选项显示

选择下拉项，同时加载数据到第三个下拉框

注：在这里直接去掉了第二行的标签

为了获取改变数据的行，试了很久，动态生成的下拉框无法获取到索引，所以才想到了使用id，并且给id后加一个数字

本篇文章是对JQuery获取和设置Select选项的一些常用方法进行了汇总介绍 有需要的朋友可以参考一下  

获取select 选中的 text:  $("#cusChildTypeId") find("option:selected") text() $("#cusChildTypeId option:selected") text() 获取select选中的 value  $("#ddlRegType ") val() 获取select选中的索引:       $("#ddlRegType ") get( ) selectedIndex 得到select项的个数     $("#cusChildTypeId") get( ) options length 设置select 选中的索引      $("#cusChildTypeId") get( ) selectedIndex=index//index为索引值 设置select 选中的value     $("#cusChildTypeId") attr("value" "Normal")    $("#cusChildTypeId") val("Normal")    $("#cusChildTypeId") get( ) value = "Normal" 设置select 选中的text:   >var count=$("#cusChildTypeId") get( ) options length     for(var i= i<counti++)           {             if($("#cusChildTypeId") get( ) options text == text)           {               $("#cusChildTypeId") get( ) options selected = true             break           }          }

lishixinzhi/Article/program/Java/JSP/201311/19941

---