Làm thế nào để nhận được văn bản của một mục được chọn trong một điều khiển chọn?

Question

<select name="DropList" id="serverDropList"> 
    <option selected="selected" value="2">server1:3000</option> 
    <option value="5">server3:3000</option> 
</select> 

tôi biết trong nguyên mẫu tôi có thể nhận giá trị bằng $('serverDropList').value nhưng làm cách nào tôi có thể nhận được "server1: 3000"?

Answer 1

Tôi không nghĩ Prototype có bất kỳ phím tắt nào đó cho bạn, vì vậy:

var box = $('serverDropList'); 
var text = box.selectedIndex >= 0 ? box.options[box.selectedIndex].innerHTML : undefined; 

... mang đến cho bạn innerHTML của các tùy chọn đã chọn, hoặc undefined nếu có ai sánh kịp.

Nếu bạn thích, bạn có thể sử dụng Element#addMethods để xác định điều này một lần và có nó có sẵn trên tất cả các hộp chọn của bạn:

Element.addMethods("SELECT", (function() { 
    function getSelectedOptionHTML(element) { 
     if (!(element = $(element))) return; 
     var index = element.selectedIndex; 
     return index >= 0 ? element.options[index].innerHTML : undefined; 
    } 

    return { 
     getSelectedOptionHTML: getSelectedOptionHTML 
    }; 
})()); 

Cách sử dụng:

var text = $('serverDropList').getSelectedOptionHTML(); 

tôi đã sử dụng một hàm có tên khi xác định cái đó. Nếu bạn không bận tâm về chức năng đặt tên (Tôi, tôi always use them), bạn có thể làm cho nó một chút đơn giản hơn:

Element.addMethods("SELECT", { 
    getSelectedOptionHTML: function(element) { 
     if (!(element = $(element))) return; 
     var index = element.selectedIndex; 
     return index >= 0 ? element.options[index].innerHTML : undefined; 
    } 
); 

Answer 2

Nếu bạn đang sử dụng thử nghiệm, bạn có thể sử dụng:

var text = $('serverDropList')[$('serverDropList').selectedIndex].text; 

Answer 3

function getSelectedValue(obj) { 
    return obj.options[obj.selectedIndex].value; 
} 

Cách sử dụng:

<select onchange="alert(getSelectedValue(this););" id="mySelect"> 
<option value="1">one</option> 
<option value="2">two</option> 
</select> 

hoặc

getSelectedValue(document.getElementById('mySelect')); 

hoặc (khi sử dụng nguyên mẫu hoặc jquery)

getSelectedValue($('mySelect')); 

Answer 4

Tôi xin lỗi nếu tôi đã muộn với câu trả lời này, nhưng tôi đã nhìn vào cùng một vấn đề và tôi đã không hài lòng với câu trả lời này, vì vậy i đào cho một câu trả lời tốt hơn:

Nguyên mẫu có bộ chọn sau mà bạn có thể sử dụng để có được giá trị được chọn trong danh sách của bạn: $ F. Vì vậy, trong tình hình bạn Ví dụ, nó nên làm việc đoạn mã sau:

$F('serverDropList'); -- this for getting the value 
$F('serverDropList').text; -- this for getting the text 

Answer 5

Chọn lựa chọn thứ hai:

<select onchange="alert(getSelectedValue(this););" id="mySelect"> 
    <option> value="1" city="chicago"> one </option> 
    <option> value="2" city="orlando"> two </option> 
</select> 

tôi cần phải chọn các thành phố giá trị mục.