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

У меня есть выпадающий список с известными значениями. Я пытаюсь установить в выпадающем списке определенное значение, о существовании которого я знаю, используя 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), но это ужасно раздражает.

Комментарии к вопросу (3)
Решение

jQuery's documentation states:

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

Такое поведение реализовано в jQuery версий 1.2 и выше.

Скорее всего, вам нужно именно это:

$("._statusDDL").val('2');
Комментарии (9)

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

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

или

$("._statusDDL").val(2).change();
Комментарии (3)

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

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

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

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

Комментарии (5)

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

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

, а не с

$("._statusDDL").val(2);
Комментарии (0)

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

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

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

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

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

Примечание:

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

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

Комментарии (1)

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

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

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

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

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

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

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

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

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


<select id="listOfMonths">
  January
  February
  March
Комментарии (0)

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

Подобно


<select id="select_selector">
Item1
Item2
Item3
Item4
Item5
Комментарии (0)

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


<select title="Data Classification">
    Top Secret
    Secret
    Confidential
Комментарии (0)

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

Я сталкивался с этим много раз при загрузке данных с вызова Ajax. Я тоже использую .NET, и при использовании селектора jQuery требуется время, чтобы настроить его на clientId. Чтобы исправить проблему, с которой вы сталкиваетесь, и избежать необходимости добавлять свойство 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(
                $('').val(this.PageId).html(this.Name)
            );
        });
    }
});
Комментарии (0)

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

Комментарии (0)

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



$("[id* = 'MyDropDown']").append(" "); //etc

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

Комментарии (0)

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

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

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

$.clientID("_statusDDL")
Комментарии (0)



ClientIDMode = "Статический"

$('#DropUserType').val('1');
Комментарии (0)

Используйте $ ("select [name $ = 'MyDropDown']") .val ().

Комментарии (1)

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

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

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

Комментарии (0)

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

$("._statusDDL").attr("selected", "");
Комментарии (0)