Js獲取下拉框當前選擇項的文本和值

　　現在有一個Id為AreaId的下拉框，要獲取它當前選擇項的文本和值有以下方法：

<span class="red">* </span>
地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;區：
<span>
      <select id="AreaId" name="AreaId" size="1" class="sel">
           <option>-請選擇地區-</option>
           <option value="1">北京</option>
           <option value="2">上海</option>
           <option value="3">深圳</option>
       </select>
</span>            

 

方法一：使用JavaScript原生態的方法.

　　1.獲取值：　　　　

document.getElementById("AreaId").value;//有效，能得到正確的值.

var index=document.getElementById("AreaId").selectedIndex;//獲取當前選擇項的索引.
document.getElementById("AreaId").options[index].value;//獲取當前選擇項的值.

　var obj=document.getElementById("AreaId");

        for(i=0;i<obj.length;i++) {//下拉框的長度就是它的選項數.

           if(obj[i].selected==true) {

            var text=obj[i].value;//獲取當前選擇項的值.

　　　　　　}

　　　　}

 

　　2.獲取文本：

var index=document.getElementById("AreaId").selectedIndex;//獲取當前選擇項的索引.
document.getElementById("AreaId").options[index].text;//獲取當前選擇項的文本.

document.getElementById("AreaId").options[index].innerHTML;//獲取當前選擇項的文本.

　var obj=document.getElementById("AreaId");

        for(i=0;i<obj.length;i++) {//下拉框的長度就是它的選項數.

           if(obj[i].selected==true) {

            var text=obj[i].text;//獲取當前選擇項的文本.

　　　　　　}

　　　　}

document.getElementById("AreaId").text;//注意，這句代碼無效，得到的結果為undefined.

 

方法二：使用JQuery方法(前提是已經加載了jquery庫).

 

　　1.獲取值：

$("#AreaId").val();//獲取當前選擇項的值.

var options=$("#AreaId option:selected");//獲取當前選擇項.
options.val();//獲取當前選擇項的值.

 

　　2.獲取文本：

var options=$("#AreaId option:selected");//獲取當前選擇項.

options.text();//獲取當前選擇項的文本.

options.innerHTML();//獲取當前選擇項的文本.

$("#AreaId").text;//注意，這句代碼無效，得到的結果為undefined.

 

其他屬性：　　

innerText：

var index=document.getElementById("AreaId").selectedIndex;//獲取當前選擇項的索引.

document.getElementById("AreaId").options[index].innerText;//獲取當前選擇項的文本，IE支持，Firefox不支持.

document.getElementById("AreaId").innerHTML;//獲取當前下拉框所有的元素，包括Html代碼.注意大小寫.

document.getElementById("AreaId").textContent;//獲取當前下拉框中所有的選擇項文本，不包括Html代碼.