十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
JQuery是控制和操作select详解。
创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站设计、成都网站制作、秀山土家族苗族网络推广、小程序设计、秀山土家族苗族网络营销、秀山土家族苗族企业策划、秀山土家族苗族品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供秀山土家族苗族建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com
先看下面的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();
.val()函数获取select的属性。语法:
$(selector).val(value)
val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数,则返回被选元素的当前值。
一、创建一个select元素:
二、创建如下获取属性函数:
三、结果获取:
扩展资料:
通过 .val() 方法从 textarea 元素中取得的值是不含有回车(\r)字符的。但是如果该值是通过 XHR 传递给服务器的,回车(\r)字符会被保留(或者是被浏览器添加的,但是在原始数据中并不包含回车(\r))。可以使用下面的 valHook 方法解决这个问题:
参考资料:jQuery API 中文文档 --.val()
对于 select 下 option 有 value 值的情况下,直接为 select 赋值即可,例如将下面第2项设为默认:
select id="demo1" option value="1"第1项/option option value="2"第2项/option option value="3"第3项/option option value="4"第4项/option/select
$('#demo1').val('2');
如 option 没有 value 值,则使用选择器为匹配的 option 加上 selected 属性,例如将下面第2项设为默认:
select id="demo2" option第1项/option option第2项/option option第3项/option option第4项/option/select
1
$('#demo2').find('option:eq(1)').attr('selected', true);
$(function(){
$("select").find("option").attr("SELECTED","SELECTED");
});
如果知道想要被选择的option的id,比如为op
可以直接$("#op").attr("SELECTED","SELECTED");
可以使用outerHTML属性获取select的html然后在需要的地方生成同样的html代码。
jquery当中,如果直接用html方法获取html代码只能获取元素内部的html代码。而使用prop方法,获取outerHTML可以获取包含当前元素的html代码。
当然也可以先找到select的父层元素,然后使用html方法获取select元素的html代码。
得到代码后,直接可以使用html方法在需要的地方生成相同的select代码。
$("select[name='selectName']").val(v).selected;
selectName:select标签的name属性值;
v:你想要选中的option标签的value值。