js/jQuery中单选框、下拉框的取值、设置

一.单选框

前言：jQuery中，prop()方法获取的是元素的属性（property）,而attr()获取的则是元素的特性(attribute)。selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。javascript

<input type="checkbox" checked="checked" />  (此input假定为elem)

如下三种方式能够获得checkbox的选择状态：html

1. elem.checked                     //boolean类型  
2. $(elem).prop('checked')          //boolean类型 
3. $(elem).is(':checked')           //boolean类型

1. $(elem).attr('checked')只是设置复选框最初的值，而且也不会随着复选框状态的改变而改变，而且获得的值是string类型喔。java

2. 在html中的设置为checked="checked"，而js/jQuery中的设置和判断为checked=true/falsenode

二.下拉框

<select name="" id="select">
        <option value="v11">11</option>
        <option value="v12" >12</option>
        <option value="v13" selected>13</option>
</select>

(1) js操做

1.获取选中项索引code

select.selectedIndex                             //2

2.获取选中项的valuehtm

select.value                                     //v13

3.获取选中项的text索引

select.options[select.selectedIndex].text        //13

4.替换特定项的valueip

select.options[0].value=111                       //控制options

5.选中特定项get

select.selectedIndex=0;                          //控制索引
   select.options[0].value='v00';                    //控制选定值

6.清空optioninput

select.options.length=0                          //清空

(2) jQuery操做

1.获取选中项索引

$('#select').find(':selected').index();          //2
   $('#select').get(0).selectedIndex;               //2

2.获取选中项的val

$('#select').find(':selected').val();          //13
   $('#select').get(0).value;                     //13

3.设置val=xxx为选中项

$('#select').find('option[value="v13"]').prop('selected',true);     //13

4.清空option

$('#select').empty();     //13