快捷導(dǎo)航

javascript獲取下拉列表框當(dāng)中的文本值示例代碼

更新時間：2013年07月31日 17:28:19 作者：

需要將用戶點擊下拉列表當(dāng)中某個選項后，將其所選的內(nèi)容保存起來，下面與大家分享下如何使用js獲取下拉列表框文本值，由此需求的朋友可以參考下

近日碰到一個問題，就是需要將用戶點擊下拉列表當(dāng)中某個選項后，將其所選的內(nèi)容保存起來，例如下面的HTML代碼：

 
<select onchange="isSelected(this.value);" id="city"> 
<option value="1">北京</option> 
<option value="2" >上海</option> 
<option value="2" >廣州</option> 
</select> 

也就是說當(dāng)用戶選擇“上?！边@一列時，需要將“上?！边@個名稱保存起來。其實方法很簡單?？聪旅鎗avascript代碼：

復(fù)制代碼代碼如下:

 
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; //關(guān)鍵點 
alert("cityName:" + cityName); 
} 
} 

也可以這么做：

復(fù)制代碼代碼如下:

 
function isSelected(value) { 
var city = document.getElementById("city"); 
alert(city.options[city.selectedIndex].innerText); 
} 

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

在javascript函數(shù)當(dāng)中，通過domcument對象獲取當(dāng)前下拉框的節(jié)點元素，由于節(jié)點的值并非只有一個，所以我們可以通過循環(huán)節(jié)點來得到每個選項的值。在循環(huán)的時候通過判斷當(dāng)前選項是否選中，如果選中則使用city[i].innerText 方式獲取當(dāng)前所選中的文本值。當(dāng)然如果需要獲取選項值，只需如此即可：city[i].value.

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

您可能感興趣的文章: