jQuery для получения и установки выбранного значения параметра элемента выбора html

126

Я пытаюсь получить и установить выбранное значение элемента select (раскрывающийся список) с помощью jQuery.

для получения я пробовал $("#myId").find(':selected').val(), $("#myId").val()но оба возвращают undefined.

Мы будем очень признательны за любое понимание этой проблемы.

ErnieStings
источник
если вы используете asp .net, их идентификатор может быть другим после рендеринга!
Ригоберт Сонг

Ответы:

154

То, как оно у вас есть, на данный момент правильное. Либо идентификатор избранного не то, что вы говорите, либо у вас есть проблемы в домене.

Проверьте идентификатор элемента, а также проверьте правильность разметки здесь, в W3c.

Без действующего dom jQuery не может правильно работать с селекторами.

Если идентификаторы верны и ваш дом проверяет, применяется следующее:

Для чтения выберите значение параметра

$('#selectId').val();

Чтобы установить значение параметра выбора

$('#selectId').val('newValue');

Чтобы прочитать выбранный текст

$('#selectId>option:selected').text();
Красный квадрат
источник
@ Html.DropDownList ("CoinTypes", (SelectList) ViewBag.RequiredLevel, new {@class = "form-control", @ style = "height: 21px; margin-top: 5px;"}), но $ ('# CoinTypes «) .val (@ ViewBag.CoinType); не выбирает
Нитхин Пол
@NithinPaul на самом деле не комментарий, задайте вопрос, который показывает html, чтобы кто-то действительно мог попытаться выяснить, что не так. Не уверен, как вы можете ожидать, что кто-то решит это с помощью кода веб-форм / mvc!
RedSquare
248

чтобы получить / установить фактическое свойство selectedIndex для элемента select:

$("#select-id").prop("selectedIndex");

$("#select-id").prop("selectedIndex",1);
pmko
источник
19
Важно отметить, что функция prop () была реализована в версии 1.6, поэтому предыдущие версии не имеют этой функции.
RobB
18
Мне нравится этот ответ, потому что он фактически отвечает на вопрос о доступе к индексу, а не только к значению.
Пабло Диас,
4
да. Я думал, что это изначальный вопрос.
Джек Холт,
Вы, вероятно, также можете использовать attr с тем же синтаксисом, и все будет в порядке.
Ицхак
7
@ M.YitzhakSamuel .attr()и .prop()не являются синонимами. Он будет работать в определенных случаях, когда атрибут также является свойством, например .attr('id'), равен .prop('id'). В этом случае .prop('selectedIndex')равно .get(0).selectedIndex.
WynandB 03
7

$('#myId').val() должен это сделать, в противном случае я бы попробовал:

$('#myId option:selected').val()
karim79
источник
4

При настройке с помощью JQMне забудьте обновить UI:

$('#selectId').val('newValue').selectmenu('refresh', true);
Джаспер Гискомб
источник
Спасибо за этот самородок - мне было интересно, почему новое значение не отображается на экране после изменения selectedIndex на $ ("# slot-choice"). Prop ("selectedIndex", n).
Samik R 04
3

$("#myId").val()должен работать, если myidэто идентификатор элемента select!

Это установит выбранный элемент: $("#myId").val('VALUE');

Ригоберт Сонг
источник
1

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

<select id="Country">

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

var result= $("#Country option:selected").text();

он будет работать нормально.

JaySing
источник
0

Я знаю, что это старый, но я просто очень долго работал с Razor, не мог заставить его работать, как бы я ни старался. Продолжал возвращаться как «undefined» независимо от того, использовал ли я «текст» или «html» для атрибута. Наконец, я добавил к опции атрибут «значение-данные», и она прекрасно прочитала.

 <option value="1" data-value="MyText">MyText</option>

 var DisplayText = $(this).find("option:selected").attr("data-value");
Darkloki
источник
0

$ ("#myId option: selected") .text (); предоставит вам текст, который вы выбрали в раскрывающемся элементе. в любом случае вы можете изменить его на .val (); чтобы понять его ценность. проверьте приведенную ниже кодировку

<select id="myId">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>`
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>
Wikum W
источник
-1

Попробуй это

$('#your_select_element_id').val('your_value').attr().add('selected');
Сайед Назир Хуссейн
источник