jquery怎么获取select选中的值

jquery怎么获取select选中的值,第1张

jQuery是控制和 *** 作select详解。
先看下面的html代码
<select id="test">
<option value="1">选项一<option>
<option value="2">选项一<option>

<option value="n">选项N<option>
</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();

这个问题包含两个部分:
获取select的被选项
$("select
option:checked");获取目标元素属性
$(selector)attr("some-attribute");示例代码如下
创建Html元素
点击按钮获取所有被选项的ds属性:a,我的ds属性是20bc,我的ds属性是15d设置css

1如果 select 元素下的所有 option 元素均没有指定 selected 属性,会默认选中第一个。
2可以通过 selectselectedIndex 获取到选中的 option 元素的索引。
3可以通过 selectoptions[selectselectedIndex] 获取到选中的 option 元素。
option 元素 <option selected="selected" value="value3">text3</option>,可以通过 optionvalue 获得 option 元素的 value 属性值,即 value3;可以通过 optiontext 获得 option 元素内的文本,即 text3。
4如果 option 元素没有定义 value 属性,则 IE 中 optionvalue 无法获得,但 Safari、Opera、FireFox 依旧可以通过 optionvalue 获得,值同于 optiontext 。
5可以通过 optionattributesvalue && optionattributesvaluespecified 来判断 option 元素是否定义了 value 属性。
6故,获得当前 select 元素值的脚本如下:
var getSelectValue = funtion(select) {
var idx = selectselectedIndex,
option,
value;
if (idx > -1) {
option = selectoptions[idx];
value = optionattributesvalue;
return (value && valuespecified) optionvalue : optiontext);
}
return null;
}

/遍历选中的option/
$("#id option:selected")each(function(i){
$(this)val();/获取选中的option值/
$(this)attr("selected",false);/将选中的option设置为未选中状态/
});

基本思路:遍历select下的option,使用val()获取每个option的值,然后加入到一个数组中。根据这个思路,可以使用for循环或者jQuery的each()遍历函数实现。这里提供一个更简洁的代码:
$("option")map(function(){return $(this)val();})get()join(", ")
代码说明:
使用map()函数把每个option的值传递到当前匹配集合,生成包含返回值的对象;
使用 get() 处理返回的对象以得到基础的数组;
使用join()函数组装字符串。
实例演示如下:
1、HTML结构
<select id="test">
<option value="option-1">option-1</option>
<option value="option-2">option-2</option>
<option value="option-3">option-3</option>
</select><br>
<input type="button" value="获取所有option值">
2、jquery代码
$(function(){
$(":button")click(function() {
var str = $("#test option")map(function(){return $(this)val();})get()join(", ")
alert(str);
});
});


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13191534.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-06-18
下一篇 2023-06-18

发表评论

登录后才能评论

评论列表(0条)

保存