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

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

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

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

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

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

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

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

или

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

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

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

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

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

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

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

а не с

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

Кажется, что эти решения предполагают, что каждый элемент в ваших выпадающих списках имеет значение 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

Фу !!

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

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

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

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

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

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

Замечания:

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

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

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

подобно

<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 и других.

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

<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);

Поэтому я изменил его так, что теперь он выполняется через 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)
            );
        });
    }
});

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

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

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

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

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

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

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

$.clientID("_statusDDL")

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

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

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

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

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

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

<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');

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

$("._statusDDL").attr("selected", "");