select multiple 取值问题 及jquery 的实现(type 是 select-multiple 不是 select-one )
2014-12-10 10:23
441 查看
<select multiple="multiple" style="width: 200px;" id="mymultiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
使用原生的javascript 脚本只能够取得第一个选中的第一个的值
var z = document.getElementById("mymultiple");
alert(z.value)
可以通过轮训所有selected 的option 取得所有选中的数值
jquery 或者第三方类库 会返回1,2,3,4 这样的值
jquery的实现如下:
通过判断select的 type 属性,如果是type: "select-multiple"(相对应的是select-one)
不是“select-one”,则轮训所有option,取得是selected 的option的数值,放到一个数组中
var value, option,
options = elem.options,
index = elem.selectedIndex,
one = elem.type === "select-one" || index < 0,
values = one ? null : [],
max = one ? index + 1 : options.length,
i = index < 0 ?
max :
one ? index : 0;
// Loop through all the selected options
for ( ; i < max; i++ ) {
option = options[ i ];
// IE6-9 doesn't update selected after form reset (#2551)
if ( ( option.selected || i === index ) &&
// Don't return options that are disabled or in a disabled optgroup
( support.optDisabled ? !option.disabled : option.getAttribute( "disabled" ) === null ) &&
( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) {
// Get the specific value for the option
value = jQuery( option ).val();
// We don't need an array for one selects
if ( one ) {
return value;
}
// Multi-Selects return an array
values.push( value );
}
}
return values;
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
使用原生的javascript 脚本只能够取得第一个选中的第一个的值
var z = document.getElementById("mymultiple");
alert(z.value)
可以通过轮训所有selected 的option 取得所有选中的数值
jquery 或者第三方类库 会返回1,2,3,4 这样的值
jquery的实现如下:
通过判断select的 type 属性,如果是type: "select-multiple"(相对应的是select-one)
不是“select-one”,则轮训所有option,取得是selected 的option的数值,放到一个数组中
var value, option,
options = elem.options,
index = elem.selectedIndex,
one = elem.type === "select-one" || index < 0,
values = one ? null : [],
max = one ? index + 1 : options.length,
i = index < 0 ?
max :
one ? index : 0;
// Loop through all the selected options
for ( ; i < max; i++ ) {
option = options[ i ];
// IE6-9 doesn't update selected after form reset (#2551)
if ( ( option.selected || i === index ) &&
// Don't return options that are disabled or in a disabled optgroup
( support.optDisabled ? !option.disabled : option.getAttribute( "disabled" ) === null ) &&
( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) {
// Get the specific value for the option
value = jQuery( option ).val();
// We don't need an array for one selects
if ( one ) {
return value;
}
// Multi-Selects return an array
values.push( value );
}
}
return values;
相关文章推荐
- Jquery 实现radio、select、checkbox等取值
- jQuery选择器----------jquery实现select下拉框的取值与赋值,设置选中的方法大全
- jquery实现的拖拽效果,解决拖动速度过快时的会卡现象,select的遮挡问题和透明效果
- JQuery实现Checkbox去选时的取值问题IE6和IE8
- jQuery实现多选下来框(multiple select)
- jQuery实现多选下来框(multiple select)
- jQuery实现多选下来框(multiple select)
- jQuery实现多选下来框(multiple select)
- jquery Firefox3.5中操作select的问题
- 测试JQuery中常用的取值方法 包含(input areatext select checkbox radio )
- AjaxPro 实现 三级联动菜单时,出现二级select 闪烁问题
- jQuery live( type, fn ) 委派事件实现
- jquery在Firefox3.5中操作select的问题
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- jquery ajax里面的datetype设成json时,提交不了数据的问题
- Jquery 对 radio取值,checkbox取值,select取值,rad
- 异步 HttpContext.Current实现取值的方法(解决异步Application,Session,Cache...等失效的问题)
- 异步 HttpContext.Current实现取值的方法(解决异步Application,Session,Cache...等失效的问题)
- 异步 HttpContext.Current实现取值的方法(解决异步Application,Session,Cache...等失效的问题)
- input+select(multiple) 实现下拉框输入值