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

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

一.单选框

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

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

以下三种方式可以得到checkbox的选择状态：

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

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

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

二.下拉框

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

(1) js操作

1.获取选中项索引

   select.selectedIndex                             //2

2.获取选中项的value

   select.value                                     //v13

3.获取选中项的text

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

4.替换特定项的value

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

5.选中特定项

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

6.清空option

   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