Cách lấy giá trị đã chọn từ danh sách thả xuống trong JavaScript

Question

Làm cách nào để bạn có thể nhận được giá trị đã chọn từ danh sách thả xuống bằng JavaScript? Tôi đã thử những điều sau nhưng nó không hoạt động.

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

Answer 1

Nó hoạt động tốt với tôi.

Tôi có HTML sau:

<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> 

Và JavaScript sau:

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); 
} 

Xem mà bạn đang sử dụng id đúng. Trong trường hợp bạn đang sử dụng nó với ASP.NET, id thay đổi khi hiển thị.

Answer 2

Direct value nên chỉ làm việc tốt:

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

Lý do duy nhất mã của bạn có thể thất bại là khi không có mục đã chọn, sau đó các selectedIndex lợi nhuận -1 và phá vỡ mã.

Answer 3

Tôi sẽ nói thay đổi var sv = sel.options [sel.selectedIndex] .value; để var sv = sel.options [sel.selectedIndex] .text;

Nó làm việc cho tôi. Hướng bạn tới nơi tôi tìm thấy giải pháp của tôi Getting the selected value dropdown jstl

Answer 4

Hy vọng nó sẽ làm việc cho bạn

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 
} 

Answer 5

Đây là một ví dụ đơn giản để có được những giá trị được lựa chọn thả xuống trong javascript

Đầu tiên chúng tôi thiết kế giao diện người dùng cho dropdown

<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> 

Tiếp theo chúng ta cần viết kịch bản để nhận mục đã chọn

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

Bây giờ Khi thay đổi menu thả xuống mục đã chọn sẽ được cảnh báo.

Answer 6

Theo thông số kỹ thuật Html5, bạn nên sử dụng - element.options [e.selectedIndex]. văn bản

ví dụ: nếu bạn có chọn hộp như dưới đây:

<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> 

bạn có thể nhận được giá trị sử dụng kịch bản sau đây:

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

Cố gắng và thử nghiệm.