jqueryselectpanel的简单介绍

如何使用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标签，并默认选中“白”这个选项：/spanbr

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控件之后

相关问答

Q1: 使用jQuery从select选项框中删除选项

从select选项框中删除选项，即从select元素中删除指定options元素，那么要如何使用jQuery实现？下面本篇文章就来给大家介绍一下使用jQuery从select元素中删除options的方法，希望对大家有所帮助。

想要使用jQuery从select元素中删除options元素，可以先使用jQuery选择器从select中选择需要删除的options元素，然后使用JQuery的remove()方法从HTML文档中删除该选项。

remove()方法用于法移除被选元素，包括所有的文本和子节点。该方法也会移除被选元素的数据和事件。

示例1： 使用remove()方法删除value='val_1'的选项

效果图：

示例2： 使用remove()方法删除class ='val'的选项

效果图：

更多 前端开发 知识，请查阅 HTML中文网 ！！

Q2: jquery怎么获取select选中的值

jQuery是控制和操作select详解。

先看下面的html代码

select id="test"

option value="1"选项一option

option value="2"选项一option

...

option value="n"选项Noption

/select

所谓jQuery操作“select”, 说的更确切一些是应该是jQuery控制 “option”， 看下面的jQuery代码：

//获取第一个option的值

$('#test option:first').val();

//最后一个option的值

$('#test option:last').val();

//获取第二个option的值

$('#test option:eq(1)').val();

//获取选中的值

$('#test').val();

$('#test option:selected').val();

//设置值为2的option为选中状态

$('#test').attr('value','2');

//设置最后一个option为选中

$('#test option:last').attr('selected','selected');

$("#test").attr('value' , $('#test option:last').val());

$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());

//获取select的长度

$('#test option').length;

//添加一个option

$("#test").append("option value='n+1'第N+1项/option");

$("option value='n+1'第N+1项/option").appendTo("#test");

//添除选中项

$('#test option:selected').remove();

//删除项选中(这里删除第一项)

$('#test option:first').remove();、

//指定值被删除

$('#test option').each(function(){

if( $(this).val() == '5'){

$(this).remove();

}

});

$('#test option[value=5]').remove();

//获取第一个Group的标签

$('#test optgroup:eq(0)').attr('label');

//获取第二group下面第一个option的值

$('#test optgroup:eq(1) : option:eq(0)').val();

Q3: jQuery对select操作小结(遍历option,操作option)

本篇文章是关于jQuery对select的操作进行了总结介绍 需要的朋友可以参考下  

//遍历option和添加 移除option function changeShipMethod(shipping){  var len = $("select[@name=ISHIPTYPE] option") length  if(shipping value != "CA"){   $("select[@name=ISHIPTYPE] option") each(function(){    if($(this) val() == ){     $(this) remove();    }   });  }else{   $("option value= UPS Ground/option") appendTo($("select[@name=ISHIPTYPE]"));  } } //取得下拉选单的选取值 $( #testSelect option:selected ) text(); 或 $("#testSelect") find( option:selected ) text(); 或 $("#testSelect") val(); ////////////////////////////////////////////////////////////////// 记性不好的可以收藏下 下拉框: var cc    = $(" formc select[@name= country ] option[@selected]") text(); //得到下拉菜单的选中项的文本(注意中间有空格) var cc = $( formc select[@name="country"] ) val();   //得到下拉菜单的选中项的值 var cc = $( formc select[@name="country"] ) attr("id"); //得到下拉菜单的选中项的ID属性值 $("#select") empty();//清空下拉框//$("#select") ( ); $("option value= /option") appendTo("#select")//添加下拉框的option

稍微解释一下: select[@name= country ] option[@selected] 表示具有name 属性 并且该属性值为 country 的select元素 里面的具有selected 属性的option 元素 可以看出有@开头的就表示后面跟的是属性

单选框: $("input[@type=radio][@checked]") val();   //得到单选框的选中项的值(注意中间没有空格) $("input[@type=radio][@value= ]") attr("checked" checked ); //设置单选框value= 的为选中状态 (注意中间没有空格)

复选框: $("input[@type=checkbox][@checked]") val(); //得到复选框的选中的第一项的值 $("input[@type=checkbox][@checked]") each(function(){ //由于复选框一般选中的是多个 所以可以循环输出    alert($(this) val());    });

$("#c ") attr("checked" );//不打勾 $("#c ") attr("checked" true);//打勾 if($("#c ") attr( checked )==undefined){} //判断是否已经打勾 当然jquery的选择器是强大的 还有很多方法 script src=jquery js type=text/javascript/script script language="javascript" type=text/javascript $(document) ready(function(){ $("#selectTest") change(function() {        //alert("Hello");        //alert($("#selectTest") attr("name"));        //$("a") attr("href" "xx ");        //window location href="xx ";        //alert($("#selectTest") val());        alert($("#selectTest option[@selected]") text());        $("#selectTest") attr("value" " ");

}); }); /script

a href="#"aaass/a ! 下拉框 select id="selectTest" name=selectTest option value=" " /option option value=" " /option option value=" " /option option value=" " /option option value=" " /option option value=" " /option /select jquery radio取值 checkbox取值 select取值 radio选中 checkbox选中 select选中 及其相关获取一组radio被选中项的值 var item = $( input[@name=items][@checked] ) val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]") text(); select下拉框的第二个元素为当前选中值 $( #select_id )[ ] selectedIndex = ; radio单选组的第二个元素为当前选中值 $( input[@name=items] ) get( ) checked = true; 获取值 文本框 文本区域 $("#txt") attr("value") 多选框checkbox $("#checkbox_id") attr("value") 单选组radio $("input[@type=radio][@checked]") val(); 下拉框select $( #sel ) val(); 控制表单元素 文本框 文本区域 $("#txt") attr("value" );//清空内容                 $("#txt") attr("value" );//填充内容 多选框checkbox $("#c ") attr("checked" );//不打勾                 $("#c ") attr("checked" true);//打勾                 if($("#c ") attr( checked )==undefined) //判断是否已经打勾 单选组radio $("input[@type=radio]") attr("checked" );//设置value= 的项目为当前选中项 下拉框select $("#sel") attr("value" sel );//设置value= sel 的项目为当前选中项             $("optionvalue= /optionoptionvalue= /option") appendTo("#sel")//添加下拉框的option             $("#sel") empty() //清空下拉框

lishixinzhi/Article/program/Java/JSP/201311/20142

Q4: 怎么用jQuery动态创建一个select控件,同时给它添加选中事件?

//HTML

div id="dv"/div

//JQuery

$(function () {

//创建select

var $select = $("select id='s1'option value='1'text1/option/option");

//把创建好的加载到div中

$("#dv").append($select);

//给所有option注册事件

$("#s1 option").click(function () {

//$(this).val()是每一个option的value

alert($(this).val());

});

});

jqueryselectpanel的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、jqueryselectpanel的信息别忘了在本站进行查找喔。