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都適用！