Изменить выбранное значение раскрывающегося списка с помощью jQuery


840

У меня есть выпадающий список с известными значениями. Я пытаюсь установить в раскрывающемся списке определенное значение, которое, как я знаю, существует с использованием jQuery . Используя обычный JavaScript , я бы сделал что-то вроде:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

Однако мне нужно сделать это с помощью jQuery , потому что я использую класс CSS для моего селектора (глупые идентификаторы клиента ASP.NET ...).

Вот несколько вещей, которые я пробовал:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

Как я могу сделать это с помощью jQuery ?


Обновить

Так что, как оказалось, с первого раза я справился:

$("._statusDDL").val(2);

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

Не удалось установить выбранное свойство. Неверный индекс

Я не уверен, если это ошибка в jQuery или Internet Explorer 6 (я предполагаю, Internet Explorer 6 ), но это ужасно раздражает.


21
Проблема здесь в конечном итоге была проблема с IE6. Я создавал новые элементы option для элемента select, а затем пытался установить значение одного из этих вновь созданных элементов option. IE6 неправильно ждет, пока он не получит контроль от скрипта, чтобы фактически создать новые элементы в DOM так эффективно, что я пытался установить в раскрывающихся списках опции, которые еще не существовали, даже если они должны были быть.
Phairoh

Вы могли бы использовать чистый JavaScriptdd1 = document.getElementsByClassName('classname here'); dd1.value = 2;
user2144406

Ответы:


1008

Документация jQuery гласит:

[jQuery.val] проверяет или выбирает все переключатели, флажки и выбирает параметры, соответствующие набору значений.

Такое поведение есть в jQueryверсиях 1.2и выше.

Скорее всего, вы хотите это:

$("._statusDDL").val('2');

22
Это работает, если selectскрыто ( display: none;)? Я не могу заставить его работать правильно ...
Падел

11
Это просто спасло меня от написания таких вещей, как $('._statusDDL [value="2"]').attr('selected',true);Спасибо!
Василий

6
@Nordes, что было бы в случае получения выбранного значения. В этом случае это установка выбранного значения или, точнее, установка выбранного параметра.
Джон П

107
@JL: Вам нужно добавить, .change()чтобы увидеть опцию в интерфейсе выпадающего списка, то есть$('#myID').val(3).change();
Кай Ноак

10
Цепочка .change () должна быть добавлена ​​к ответу. Я думал, что схожу с ума с этим решением не работает, пока я не прочитал комментарии.
Дэвид Баукум

139

Со скрытым полем вам нужно использовать вот так:

$("._statusDDL").val(2);
$("._statusDDL").change();

или

$("._statusDDL").val(2).change();

Не могли бы вы объяснить, почему вам нужно запустить событие изменения для скрытых полей?
Самуил

1
@Samuel: потому что если вы измените выбранную опцию выбора с помощью jQuery, изменение не сработает, поэтому требуется ручной запуск.
Machineaddict

2
Если вам нужно инициировать событие изменения после изменения значения раскрывающегося списка, вам нужно вызвать функцию изменения после установки значения.
tver3305

Я специально нуждался в том, чтобы событие изменения было запущено, так что это было очень полезно для меня
Рохан

32

Просто к сведению, вам не нужно использовать CSS-классы для достижения этой цели.

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

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET будет правильно отображать идентификатор элемента управления в jQuery.


8
Это работает только тогда, когда ваш javascript находится внутри разметки .aspx или .ascx, а не когда он находится в файле .js, как это было здесь. Кроме того, в зависимости от того, насколько глубоко ваши элементы управления вложены в ваше приложение (в моем случае они имели глубину около 10 уровней), ClientID может стать невероятно длинным и на самом деле может значительно увеличить размер вашего JavaScript, если использовать его слишком свободно. Я стараюсь, чтобы моя разметка была как можно меньше.
Phairoh

2
@ y0mbo Но даже если вы перейдете в MVC, вы все равно должны использовать внешние файлы .JS для своего JavaScript, чтобы браузеры и прокси-серверы могли кэшировать его для производительности.
7

1
@Roberto - но MVC не использует глупые соглашения об именах, которые применяются веб-формами asp.net, так что вы можете удобно ссылаться во внешнем js-файле на нужные вам элементы управления.
lloydphillips

6
Если вы создаете JavaScript в стиле OO, вы можете передать свои клиентские идентификаторы в конструктор вашего объекта. Весь объектный код содержится во внешнем js-файле, но вы создаете его экземпляр из своего aspx-кода.
Майкизиг

1
Я бы скорее установил ClientIDMode = "Static" в элементах управления asp, чтобы вы знали, что идентификатор будет идентификатором, который вы указали. Вы должны быть осторожны, если затем поместите этот контроль в ретранслятор. msdn.microsoft.com/en-us/library/…
Шоусон

25

Просто попробуйте с

$("._statusDDL").val("2");

а не с

$("._statusDDL").val(2);

23

Кажется, что эти решения предполагают, что каждый элемент в ваших выпадающих списках имеет значение val (), относящееся к их позиции в раскрывающемся списке.

Все немного сложнее, если это не так.

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

$("#dropDownList").prop("selectedIndex");

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

$("#dropDownList").prop("selectedIndex", 1);

Обратите внимание, что для функции prop () требуется JQuery v1.6 или новее.

Посмотрим, как бы вы использовали эти две функции.

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

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

Вы можете добавить кнопку «Предыдущий месяц» и «Следующий месяц», которая просматривает выбранный в данный момент элемент раскрывающегося списка и изменяет его на предыдущий / следующий месяц:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

А вот JavaScript, который будут запускать эти кнопки:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

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

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

Фу !!

Надеюсь это поможет.


20

Посмотрев на некоторые решения, это сработало для меня.

У меня есть один раскрывающийся список с некоторыми значениями, и я хочу выбрать то же значение из другого раскрывающегося списка ... Итак, сначала я вставил переменную a selectIndexмоего первого раскрывающегося списка .

var indiceDatos = $('#myidddl')[0].selectedIndex;

Затем я выбираю этот индекс во втором раскрывающемся списке.

$('#myidddl2')[0].selectedIndex = indiceDatos;

Замечания:

Я думаю, что это самое короткое, надежное, общее и элегантное решение.

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


5
Это правильный ответ, и каждый, кто не сказал «selectedIndex» сразу, должен знать лучше. Ура DOM API и люди, которые написали это еще в каменном веке.
vsync

16

Я знаю, что это старый вопрос, и вышеуказанные решения работают хорошо, за исключением некоторых случаев.

подобно

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

Таким образом, элемент 4 будет отображаться как «Выбранный» в браузере, и теперь вы хотите изменить значение на 3 и отобразить «Item3» как выбранный вместо Item4.Так, как указано выше, если вы используете

jQuery("#select_selector").val(3);

Вы увидите, что элемент 3 выбран в браузере. Но когда вы обрабатываете данные в php или asp, вы найдете выбранное значение как «4». Причина в том, что ваш HTML будет выглядеть так.

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

и он получает последнее значение как «4» на другом языке.

ТАК МОЕ ЗАКЛЮЧИТЕЛЬНОЕ РЕШЕНИЕ НА ЭТОМ ОТНОШЕНИИ

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

РЕДАКТИРОВАТЬ : Добавить одинарные кавычки вокруг "+ newselectedIndex +", чтобы те же функции можно было использовать для нечисловых значений.

Итак, на самом деле я удалил выбранный атрибут и затем сделал новый как выбранный.

Буду признателен за комментарии старших программистов, таких как @strager, @ y0mbo, @ISIK и других.


10

Если у нас есть раскрывающийся список с заголовком «Классификация данных»:

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

Мы можем получить его в переменную:

var dataClsField = $('select[title="Data Classification"]');

Затем поместите в другую переменную значение, которое мы хотим иметь в раскрывающемся списке:

var myValue = "Top Secret";  // this would have been "2" in your example

Затем мы можем использовать поле, в которое мы поместили dataClsField, сделать поиск myValueи выбрать его, используя .prop():

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

Или, вы можете просто использовать .val(), но ваш селектор .может использоваться, только если он соответствует классу в раскрывающемся списке, и вы должны использовать кавычки для значения в скобках, или просто использовать переменную, которую мы установили ранее:

dataClsField.val(myValue);

4

Поэтому я изменил его так, что теперь он выполняется через 300 миллисекунд, используя setTimeout. Кажется, сейчас работает.

Я сталкивался с этим много раз при загрузке данных из вызова Ajax. Я тоже использую .NET, и требуется время для настройки на clientId при использовании селектора jQuery. Чтобы устранить возникшую проблему и избежать добавления setTimeoutсвойства, вы можете просто вставить « async: false» в вызов Ajax, и у DOM будет достаточно времени для возврата объектов, которые вы добавляете в выбор. Небольшой образец ниже:

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

3

Просто примечание - я использовал селекторы подстановочных знаков в jQuery для захвата элементов, которые скрыты с помощью идентификаторов ASP.NET CLient - это также может вам помочь:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

Обратите внимание, что идентификатор * подстановочный знак - это найдет ваш элемент, даже если имя «ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown»


3

Я использую функцию расширения для получения идентификаторов клиента, например так:

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

Затем вы можете вызвать элементы управления ASP.NET в jQuery следующим образом:

$.clientID("_statusDDL")

3

Другой вариант - установить параметр управления ClientID = "Static" в .net, а затем вы можете получить доступ к объекту в JQuery по заданному вами идентификатору.


3
<asp:DropDownList id="MyDropDown" runat="server" />

Использование $("select[name$='MyDropDown']").val().


Если вы сопоставляете имя, вы можете удалить его, $чтобы оно соответствовало полному совпадению, а не «заканчивалось на». Но ваше предложение, вероятно, быстрее, чем сопоставление только с именем класса. Даже быстрее, хотя будет element.classnameили #idname.
Алик

2

Как вы загружаете значения в раскрывающийся список или определяете, какое значение выбрать? Если вы делаете это с помощью Ajax, то причиной, по которой вам нужна задержка перед выбором, может быть то, что значения не были загружены во время выполнения рассматриваемой строки. Это также объясняет, почему это работает, когда вы помещаете в строку оператор оповещения перед установкой статуса, поскольку действие оповещения даст достаточно времени для загрузки данных.

Если вы используете один из методов jjuery Ajax, вы можете указать функцию обратного вызова и затем вставить ее $("._statusDDL").val(2);в функцию обратного вызова.

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


2
<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "Static"

$('#DropUserType').val('1');

1

В моем случае я смог заставить его работать, используя метод .attr ().

$("._statusDDL").attr("selected", "");
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.