快捷導(dǎo)航

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

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

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

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

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

也就是說(shuō)當(dāng)用戶選擇“上?！边@一列時(shí)，需要將“上海”這個(gè)名稱保存起來(lái)。其實(shí)方法很簡(jiǎn)單?？聪旅鎗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)鍵點(diǎn) 
alert("cityName:" + cityName); 
} 
} 

也可以這么做：

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

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

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

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

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

您可能感興趣的文章: