DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> javascript獲取下拉列表框當中的文本值示例代碼
javascript獲取下拉列表框當中的文本值示例代碼
編輯:JavaScript綜合知識     
需要將用戶點擊下拉列表當中某個選項後,將其所選的內容保存起來,下面與大家分享下如何使用js獲取下拉列表框文本值,由此需求的朋友可以參考下  

近日碰到一個問題,就是需要將用戶點擊下拉列表當中某個選項後,將其所選的內容保存起來,例如下面的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都適用!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved