您的位置:首页 > Web前端 > JQuery

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;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: