javascript擷取下拉式清單方塊當中的文本值範例程式碼

近日碰到一個問題，就是需要將使用者點擊下拉式清單當中某個選項後，將其所選的內容儲存起來，例如下面的HTML代碼：
複製代碼 代碼如下:
<select onchange="isSelected(this.value);" id="city">
<option value="1">北京</option>
<option value="2" >上海</option>
<option value="2" >廣州</option>
</select>

也就是說當使用者選擇“上海”這一列時，需要將“上海”這個名稱儲存起來。其實方法很簡單。看下面javascript代碼：
複製代碼 代碼如下:
function isSelected(value) {
var cityName;
var city = document.getElementById("city");
//擷取選中的城市名稱
for(i=0;i<city.length;i++){
if(city[i].selected==true){
cityName = city[i].innerText; //關鍵點
alert("cityName:" + cityName);
}
}

也可以這麼做：
複製代碼 代碼如下:
function isSelected(value) {
var city = document.getElementById("city");
alert(city.options[city.selectedIndex].innerText);
}

大致解釋一下，首先在HTML頁面上有一個下拉框，並為此下拉框定了一個“city”的id，並為其綁定了一個onchange事件，通過此事件調用javascript函數。

在javascript函數當中，通過domcument對象擷取當前下拉框的節點元素，由於節點的值並非只有一個，所以我們可以通過迴圈節點來得到每個選項的值。在迴圈的時候通過判斷當前選項是否選中，如果選中則使用city[i].innerText 方式擷取當前所選中的文本值。當然如果需要擷取選項值，只需如此即可：city[i].value.

至此，通過以上方法在IE下已能達到所要的結果。但是，在FIREFOX下測試時，發現此法不起作用，最後通過查閱資料發現另外一個方法。將city[i].innerText 改為 city[i].text即可。這種方法對IE及FIXEFOX都適用！