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

Question

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

Answer 1

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

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

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

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

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

Answer 2

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

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

или

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

Answer 3

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

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

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

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

Answer 4

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

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

а не с

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

Answer 5

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

Фу !!

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

Answer 6

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

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

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

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

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

Примечание:

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

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

Answer 7

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

Как

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

Answer 8

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

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

Answer 9

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

Answer 10

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