Как получить текст выбранного элемента в элементе управления select?

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

Я знаю, что в прототип я могу получить значение с помощью $('serverDropList').value но как я могу получить "server1: 3000" ?

10
javascript prototypejs

5 ответов

Я не думаю, что Prototype имеет какой-либо ярлык, который делает это для вас, поэтому:

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

...дает вам innerHTML выбранного параметра или undefined если нет.

если вы хотите, вы можете использовать Element#addMethods чтобы определить это один раз и иметь его доступным на всех Ваших полях выбора:

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

использование:

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

я использовал именованную функцию при определении этого. Если вас не беспокоят именованные функции (I am, I всегда используйте их), вы можете сделать это немного проще:

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

Если вы используете Prototype, вы можете использовать:

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

извините, если я опоздал с этим ответом, но я рассматривал ту же проблему, и я не был удовлетворен этим ответом, поэтому я вырыл лучший ответ:

Prototype имеет следующий селектор, который вы можете использовать для того, чтобы cu получил выбранное значение вашего списка: $F. Итак, в Примере с вами, он должен работать со следующим кодом:

$F('serverDropList'); -- this for getting the value
$F('serverDropList').text; -- this for getting the text
5
function getSelectedValue( obj ) {
    return obj.options[obj.selectedIndex].value;
}

использование:

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

или

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

или (при использовании prototype или jquery)

getSelectedValue($('mySelect'));
2

выберите второй вариант:

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

Мне нужно выбрать город значения элемента.

0