Получение текста из выпадающего списка

Получение текста из выпадающего списка

Это возвращает значение того, что выбрано в моем выпадающем меню.

document.getElementById('newSkill').value

Однако я не могу найти, какое свойство использовать для текста, который в данный момент отображается в раскрывающемся меню. Я попробовал "text", но это не дало ответа, кто-нибудь здесь знает?

Для тех, кто не уверен, вот HTML-код раскрывающегося списка.

<select name="newSkill" id="newSkill">
    <option value="1">A skill</option>
    <option value="2">Another skill</option>
    <option value="3">Yet another skill</option>
</select>

14 ответов

На основе вашего примера HTML-кода вот один из способов получить отображаемый текст выбранного в данный момент параметра:

var skillsSelect = document.getElementById("newSkill");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text; 

Для тех, кто опоздал на вечеринку, было сделано несколько предложений, но никто не заметил, что они сказали .value там, где следовало бы сказать .text. Для всех нас это был запутанный день.

Просто вы можете использовать jQuery вместо JavaScript

$("#yourdropdownid option:selected").text();
Получить текст из выпадающего списка

Попробуйте это.

В исходном вопросе не упоминается JQuery. Те из нас, кто не использует JQuery, обычно предпочитают, чтобы ответы не ссылались на него, если только вопрос не ссылается на него или не помечает его. Это особенно актуально, когда есть относительно лаконичное решение, как у Патрика МакЭлхани.

cazort Наоборот. Мне нужно было знать, как это сделать с помощью JQuery, и этот ответ дал мне то, что мне нужно было знать, поэтому было очень полезно (и хорошо) со стороны Бобина Джозефа включить его в качестве ответа.

cazort ответ Патрика 13 лет назад

JCIsola Мне все равно, насколько стар ответ Патрика, мне важно, работает ли он без дополнительных программных пакетов. Он работает во всех современных браузерах, и если на то пошло, то сейчас он даже лучше, потому что старые браузеры, в которых код не работал (например, если getElementById() не поддерживается), давно вышли из эксплуатации, тогда как во времена написания ответа некоторые такие браузеры все еще использовались. И он не требует дополнительных пакетов, кроме тех, что указаны в вопросе.

Это должно вернуть текстовое значение выбранного значения.

var vSkill = document.getElementById('newSkill');
var vSkillText = vSkill.options[vSkill.selectedIndex].innerHTML;
alert(vSkillText);

Props: Tanerax за то, что прочитал вопрос, понял, о чем идет речь, и ответил на него раньше, чем другие догадались.

Отредактировано: DownModed, потому что я на самом деле полностью прочитал вопрос и ответил на него, как ни печально это выглядит.

 

document.getElementById('newSkill').options[document.getElementById('newSkill').selectedIndex].value

Должно работать.

OP хочет свойство .text, а не .value

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

document.getElementById("newSkill").options[document.getElementById('newSkill').selectedIndex].text;

Прикрепляет событие изменения к выбору, которое получает текст для каждого выбранного варианта и записывает его в div.

Вы можете использовать jQuery, он очень удобен и прост в использовании.

<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option>Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>

$("select").change(function () {
  var str = "";

  $("select option:selected").each(function() {
    str += $( this ).text() + " ";
  });

  $( "div" ).text( str );
}).change();

 

function getValue(obj)
{  
   // it will return the selected text
   // obj variable will contain the object of check box
   var text = obj.options[obj.selectedIndex].innerHTML ;
}

HTML-фрагмент

<asp:DropDownList ID="ddl" runat="server" CssClass="ComboXXX"
  onchange="getValue(this)">
</asp:DropDownList>

Вот простой и короткий метод

document.getElementById('elementID').selectedOptions[0].innerHTML

Получить выбранный текст выпадающего списка с помощью jQuery. Я использовал его в MVC...

$('#dropdownId :selected').text()

Это правильный ответ?

document.getElementById("newSkill").innerHTML

Это вернет вам весь HTML-код для опций, например ` <option value="1">Навык</option> <option value="2">Другой навык</option> <option value="3">Еще один навык</option> `

 

    var ele = document.getElementById('newSkill')
    ele.onchange = function(){
            var length = ele.children.length
            for(var i=0; i<length;i++){
                if(ele.children[i].selected){alert(ele.children[i].text)};              
            }
    }   

 

var selectoption = document.getElementById("dropdown");
var optionText = selectoption.options[selectoption.selectedIndex].text;

Как насчет текста, объясняющего происходящее?

Хотя ответ, содержащий только код, решает проблему для оператора, он не рекомендуется, поскольку не представляет никакой ценности для будущих посетителей; ответ, содержащий только код, быстро будет помечен как «очень низкого качества» и, как следствие, будет быстро удален. Отредактируйте свой ответ, включив в него объяснение того, что делает предоставленный код.

Спасибо. Надеюсь, мой ответ будет понятен другим.

когда я попытался зарегистрировать это var optionText = selectoption.options[selectoption.selectedIndex].text;, возвращается только первый элемент option. Я хочу, чтобы каждый из них отображался из события onchange.

Попробуйте, пожалуйста, следующий способ. Это самый простой способ, и он отлично работает.

var newSkill_Text = document.getElementById("newSkill")[document.getElementById("newSkill").selectedIndex];

Это был сложный вопрос, но, используя идеи отсюда, я в конечном итоге нашел решение, используя PHP и Mysqli для заполнения списка: а затем немного JavaScript для получения рабочей переменной.

<select  id="mfrbtn" onchange="changemfr()" >   
<option selected="selected">Choose one</option>
    <?php
    foreach($rows as $row)
        {
        echo '<option   value=implode($rows)>'.$row["Mfrname"].'</option>';
         }
      ?>
</select>

Затем:

<script language="JavaScript">
    
    function changemfr()
    {
     var $mfr2=document.getElementById("mfrbtn").selectedOptions[0].text;
     alert($mfr2);
    }
</script>

JavaScript должен запускаться при отображении ModalPopupExtender

Выполнение Javascript при отображении ModalPopupExtender

ASP _ NET AJAX ModalPopupExtender имеет свойства OnCancelScript и OnOkScript, но, похоже, не имеет свойства OnShowScript. Я хотел бы указать функцию javascript для запуска каждый раз, когда отображается всплывающее окно. В прошлых ситуациях я устанавливал фиктивный элемент управления TargetControlID и предоставлял свой собственный элемент управления, который сначала выполняет некоторый код JS, а затем использует методы JS для отображения всплывающего окна. Но в этом случае я показываю всплывающее окно как из клиентского, так и из серверного кода. Кто-нибудь знает, как это сделать? Кстати, мне это было нужно, потому что у меня есть текстовое поле в модальном окне, которое я хочу сделать редактором TinyMCE. Но скрипт инициализации TinyMCE не работает с невидимыми текстовыми полями, поэтому мне пришлось найти способ запустить его во время показа модального окна. Они показывают вам, как ВЫЗЫВАТЬ…

Подробнее »

Длина объекта JavaScript

Длина объекта JavaScript

У меня есть объект JavaScript. Есть ли встроенный или общепринятый способ получить длину этого объекта? const myObject = new Object(); myObject["firstname"] = "Gareth"; myObject["lastname"] = "Simpson"; myObject["age"] = 21; Это отчасти правда, но так много людей привыкли к «ассоциативному массиву» PHP, что они могут предположить, что это означает «упорядоченную ассоциативную карту», хотя объекты JS на самом деле неупорядочены. В приведенном выше примере myObject.length не определен, по крайней мере в среде браузера. Вот почему он недействителен Варианты Object.keys, values…

Подробнее »

Как опубликовать и затем перенаправить на внешний URL из ASP_Net?

Размещение и последующее перенаправление на внешний URL из ASP_Net

Как опубликовать и перенаправить на внешний URL-адрес из ASP_Net? ASP_NET серверные элементы управления возвращают данные на свою собственную страницу. Это делает случаи, когда вы хотите перенаправить пользователя на внешнюю страницу, но по какой-то причине (например, для аутентификации) вам нужно сделать публикацию на этой странице, болезненными. Отлично работает HttpWebRequest , если вы не хотите перенаправлять, и JavaScript тоже хорош в некоторых случаях, но может…

Подробнее »