Получить выбранный вариант из выбранного элемента

Question

Я пытаюсь получить выбранную опцию из выпадающего списка и заполнить другой элемент этим текстом, как показано ниже. IE порождает шторм и не работает в Firefox:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text('#ddlCodes option:selected').text();
});

Что я делаю не так?

Answer 1

Вот короткая версия:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79 сделал хороший улов, судя по названию вашего элемента txtEntry2 может быть текстовым полем, если это какой-либо тип ввода, вам нужно будет использовать .val() или .text() как это:

  $('#txtEntry2').val($(this).find(":selected").text());

Для "что не так?" часть вопроса: .text() не принимает селектор, он принимает текст, который вы хотите установить, или ничего, чтобы вернуть текст, уже там. Поэтому вам нужно получить нужный текст, а затем поместить его в метод .text(string) на объект, который вы хотите установить, как у меня выше.

Answer 2

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

$('#ddlCodes').change(function() {
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
});

Answer 3

Вот более короткая версия, которая также должна работать:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });

Answer 4

с меньшим количеством jQuery:

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value - это простой JavaScript.

(Источник: Немецкий SelfHTML )

Answer 5

Чтобы узнать количество выбранных элементов, используйте

$("select option:selected").length

Для получения значения всех выбранных элементов используйте

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

Answer 6

Попробуйте следующий код

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});

Answer 7

Используя свойство selectedOptions (HTML5), вы можете получить выбранные опции

document.getElementbyId("id").selectedOptions; 

С помощью JQuery этого можно достичь

$("#id")[0].selectedOptions; 

или

$("#id").prop("selectedOptions");

Свойство содержит массив HTMLCollection, аналогичный этому один выбранный вариант

[<option value=​"1">​ABC</option>]

или несколько вариантов выбора

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...]

Answer 8

Первая часть - получить элемент из выпадающего меню, который может выглядеть следующим образом:

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

Для захвата с помощью jQuery вы можете сделать что-то вроде этого:

$('#cycles_list').change(function() {
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
});

Как только вы сохраните значение в своей переменной, следующим шагом будет отправка информации, хранящейся в переменной, в поле формы или HTML-элемент по вашему выбору. Это может быть div p или пользовательский элемент.

т.е. <p></p> OR <div></div>

Вы бы использовали:

$ ( 'р') HTML (итерации). ИЛИ $ ('div'). Html (итерации);

Если вы хотите заполнить текстовое поле, например:

<input type="text" name="textform" id="textform"></input>

Вы бы использовали:

$ ('# textform'). Text = итерации;

Конечно, вы можете делать все вышеперечисленное за меньшее количество шагов, я просто верю, что это помогает людям учиться, когда вы разбиваете все на простые для понимания шаги ... Надеюсь, это поможет!

Answer 9

Это сработало для меня:

$("#SelectedCountryId_option_selected")[0].textContent

Answer 10

Учитывая этот HTML:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

Выберите по описанию для jQuery v1.6 +:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);