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