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

870
phairoh 31 Янв 2009 в 22:39

16 ответов

Лучший ответ

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

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

Это поведение в jQuery версиях 1.2 и выше.

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

$("._statusDDL").val('2');
1003
javiniar.leonard 2 Мар 2016 в 10:19

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

3
Mych 12 Мар 2012 в 15:05
<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');
2
hamze shoae 5 Янв 2015 в 06:34

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

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

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

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

32
y0mbo 21 Апр 2009 в 02:16

Поэтому я изменил его так, что теперь он выполняется через 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)
            );
        });
    }
});
4
Peter Mortensen 23 Июл 2011 в 20:09

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

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

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

2
Peter Mortensen 25 Май 2011 в 08:56
<asp:DropDownList id="MyDropDown" runat="server" />

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

3
Iswanto San 14 Май 2013 в 09:03

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

$("._statusDDL").attr("selected", "");
1
Colin 18 Сен 2018 в 18:27

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

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

Или

$("._statusDDL").val(2).change();
133
Aivar Luist 9 Окт 2012 в 10:21

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

<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);
10
vapcguy 16 Окт 2015 в 21:16

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

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

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

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

3
AVH 29 Мар 2010 в 20:07

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

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

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

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

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

< Сильный > Примечание :

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

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

20
Vikas 4 Апр 2013 в 05: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 и других

16
DanielJRobles 18 Фев 2015 в 23:41

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

Фу !!

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

23
Mike Gledhill 7 Мар 2013 в 11:51

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

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

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

$.clientID("_statusDDL")
3
Peter Mortensen 23 Июл 2011 в 20:11

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

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

А не с

$("._statusDDL").val(2);
25
Iswanto San 14 Май 2013 в 09:03