2012-01-12 89 views
18

如何使用JavaScript從下拉列表中選擇值?我嘗試了以下,但它不起作用。如何從JavaScript中的下拉列表中獲取選定的值

var sel = document.getElementById('select1'); 
var sv = sel.options[sel.selectedIndex].value; 
alert(sv); 
+0

你在sv中得到什麼? – Kangkan 2012-01-12 09:03:21

+1

您可以粘貼您的html內容以及使用的javascript函數 – AmGates 2012-01-12 09:16:15

+0

另請參閱:http:// stackoverflow。com/questions/1085801/how-to-get-selected-value-dropdownlist -using-javascript – Kangkan 2012-01-12 09:30:14

回答

25

這對我來說工作得很好。

我有以下HTML:

<div> 
    <select id="select1"> 
     <option value="1">test1</option> 
     <option value="2" selected="selected">test2</option> 
     <option value="3">test3</option> 
    </select> 
    <br/> 
    <button onClick="GetSelectedItem('select1');">Get Selected Item</button> 
</div> 

而且下面的JavaScript:

function GetSelectedItem(el) 
{ 
    var e = document.getElementById(el); 
    var strSel = "The Value is: " + e.options[e.selectedIndex].value + " and text is: " + e.options[e.selectedIndex].text; 
    alert(strSel); 
} 

你使用了正確的ID。 如果您將它與ASP.NET結合使用,則該代碼會在呈現時發生變化。

+1

爲什麼不直接將select元素傳遞給函數?那麼你將不需要通過id搜索select元素。 – Andrej 2015-07-10 12:56:50

+0

如果您從同一元素調用腳本,則使用'this'可以輕鬆傳遞元素。然而,從其他元素,如在這種情況下,最好的方法是傳遞元素id並獲取函數中的元素。我剛剛根據這個更新了我的答案。 – Kangkan 2015-07-11 04:41:13

3

直接value應該只是罰款:

var sv = sel.value; 
alert(sv); 

你的代碼可能會失敗的唯一原因是在沒有選擇的項,然後selectedIndex返回-1,代碼中斷。

+0

不是它不工作 – 2012-01-12 09:07:13

+0

看到我有下拉,我選擇一個項目,並試圖顯示它使用警報,但不工作警報是空的 – 2012-01-12 09:08:05

+0

代碼必須在一些事件處理程序,只是讓它躺在不會幫助。發佈更多的代碼,我們會看到你做錯了什麼。 – 2012-01-12 09:19:21

0

我會說改變var sv = sel.options [sel.selectedIndex] .value; to var sv = sel.options [sel.selectedIndex] .text;

它爲我工作。指導你到哪裏,我發現我的解決方案 Getting the selected value dropdown jstl

1

希望它爲你工作

function GetSelectedItem() 
{ 
    var index = document.getElementById(select1).selectedIndex; 

    alert("value =" + document.getElementById(select1).value); // show selected value 
    alert("text =" + document.getElementById(select1).options[index].text); // show selected text 
} 
0

下面是一個簡單的例子可以在javascript

首先,我們設計了UI的下拉列表中選擇的值下拉

<div class="col-xs-12"> 
<select class="form-control" id="language"> 
    <option>---SELECT---</option> 
    <option>JAVA</option> 
    <option>C</option> 
    <option>C++</option> 
    <option>PERL</option> 
</select> 

接下來我們需要編寫腳本來獲得所選擇的項目

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#language').change(function() { 
     var doc = document.getElementById("language"); 
     alert("You selected " + doc.options[doc.selectedIndex].value); 
    }); 
}); 

現在時更改下拉列表中選擇的項目將被警告。

0

根據Html5規範,你應該使用 - element.options [e.selectedIndex]。 text

例如,如果你有選擇框如下圖所示:

<select id="selectbox1"> 
    <option value="1">First</option> 
    <option value="2" selected="selected">Second</option> 
    <option value="3">Third</option> 
</select> 
<br/> 
<button onClick="GetItemValue('selectbox1');">Get Item</button> 

您可以使用下面的腳本獲取值:

<script> 
function GetItemValue(q) { 
    var e = document.getElementById(q); 
    var selValue = e.options[e.selectedIndex].text ; 
    alert("Selected Value: "+selValue); 
} 
</script> 

屢試不爽。

相關問題