javascript獲取下拉列表框當(dāng)中的文本值示例代碼
更新時(shí)間：2013年07月31日 17:28:19 作者：
需要將用戶點(diǎn)擊下拉列表當(dāng)中某個(gè)選項(xiàng)后，將其所選的內(nèi)容保存起來，下面與大家分享下如何使用js獲取下拉列表框文本值，由此需求的朋友可以參考下
近日碰到一個(gè)問題，就是需要將用戶點(diǎn)擊下拉列表當(dāng)中某個(gè)選項(xià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)用戶選擇“上?！边@一列時(shí)，需要將“上?！边@個(gè)名稱保存起來。其實(shí)方法很簡(jiǎn)單?？聪旅鎗avascript代碼：
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);
}
}
也可以這么做：
function isSelected(value) {
var city = document.getElementById("city");
alert(city.options[city.selectedIndex].innerText);
}
大致解釋一下，首先在HTML頁(yè)面上有一個(gè)下拉框，并為此下拉框定了一個(gè)“city”的id，并為其綁定了一個(gè)onchange事件，通過此事件調(diào)用javascript函數(shù)。
在javascript函數(shù)當(dāng)中，通過domcument對(duì)象獲取當(dāng)前下拉框的節(jié)點(diǎn)元素，由于節(jié)點(diǎn)的值并非只有一個(gè)，所以我們可以通過循環(huán)節(jié)點(diǎn)來得到每個(gè)選項(xiàng)的值。在循環(huán)的時(shí)候通過判斷當(dāng)前選項(xiàng)是否選中，如果選中則使用city[i].innerText 方式獲取當(dāng)前所選中的文本值。當(dāng)然如果需要獲取選項(xiàng)值，只需如此即可：city[i].value.
至此，通過以上方法在IE下已能達(dá)到所要的結(jié)果。但是，在FIREFOX下測(cè)試時(shí)，發(fā)現(xiàn)此法不起作用，最后通過查閱資料發(fā)現(xiàn)另外一個(gè)方法。將city[i].innerText 改為 city[i].text即可。這種方法對(duì)IE及FIXEFOX都適用！
復(fù)制代碼 代碼如下:
<select onchange="isSelected(this.value);" id="city">
<option value="1">北京</option>
<option value="2" >上海</option>
<option value="2" >廣州</option>
</select>
也就是說當(dāng)用戶選擇“上?！边@一列時(shí)，需要將“上?！边@個(gè)名稱保存起來。其實(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事件，通過此事件調(diào)用javascript函數(shù)。
在javascript函數(shù)當(dāng)中，通過domcument對(duì)象獲取當(dāng)前下拉框的節(jié)點(diǎn)元素，由于節(jié)點(diǎn)的值并非只有一個(gè)，所以我們可以通過循環(huán)節(jié)點(diǎn)來得到每個(gè)選項(xiàng)的值。在循環(huán)的時(shí)候通過判斷當(dāng)前選項(xiàng)是否選中，如果選中則使用city[i].innerText 方式獲取當(dāng)前所選中的文本值。當(dāng)然如果需要獲取選項(xiàng)值，只需如此即可：city[i].value.
至此，通過以上方法在IE下已能達(dá)到所要的結(jié)果。但是，在FIREFOX下測(cè)試時(shí)，發(fā)現(xiàn)此法不起作用，最后通過查閱資料發(fā)現(xiàn)另外一個(gè)方法。將city[i].innerText 改為 city[i].text即可。這種方法對(duì)IE及FIXEFOX都適用！
您可能感興趣的文章:
- js實(shí)現(xiàn)下拉列表選中某個(gè)值的方法(3種方法)
- jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- jquery+json 通用三級(jí)聯(lián)動(dòng)下拉列表
- javaScript年份下拉列表框內(nèi)容為當(dāng)前年份及前后50年
- js獲取下拉列表框<option>中的value和text的值示例代碼
- javascript實(shí)現(xiàn)在下拉列表中顯示多級(jí)樹形菜單的方法
- extJs 文本框后面加上說明文字+下拉列表選中值后觸發(fā)事件
- javascript級(jí)聯(lián)下拉列表實(shí)例代碼(自寫)
- 使用js實(shí)現(xiàn)一個(gè)可編輯的select下拉列表
- JavaScript實(shí)現(xiàn)下拉列表效果
相關(guān)文章
關(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
下面小編就為大家?guī)硪黄P(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
下拉列表框默認(rèn)情況下是不可編輯的，下面為大家介紹個(gè)不錯(cuò)的方法可以使下拉列表框可編輯，具體實(shí)現(xiàn)如下，需要的朋友可以參考下2013-12-12
用javascript實(shí)現(xiàn)讀取txt文檔的腳本
用javascript實(shí)現(xiàn)讀取txt文檔的腳本...2007-07-07
這篇文章主要為大家詳細(xì)介紹了小程序開發(fā)之模態(tài)框組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要為大家詳細(xì)介紹了js用類封裝pop彈窗組件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
require.js與bootstrap結(jié)合實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面登錄和頁(yè)面跳轉(zhuǎn)功能
這篇文章主要介紹了require.js與bootstrap結(jié)合實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面登錄和頁(yè)面跳轉(zhuǎn)功能,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了淺談webpack對(duì)樣式的處理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
javascript加減乘除的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨avascript加減乘除的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
使用事件委托技術(shù)能讓你避免對(duì)特定的每個(gè)節(jié)點(diǎn)添加事件監(jiān)聽器；相反，事件監(jiān)聽器是被添加到它們的父元素上2014-04-04
ES6中export?default和export之間的區(qū)別詳解
export和export?default都是es6語(yǔ)法中用來導(dǎo)出組件的,可以導(dǎo)出的文檔類型有(?數(shù)據(jù)、常量、函數(shù)、js文件、模塊等),下面這篇文章主要給大家介紹了關(guān)于ES6中export?default和export之間的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04