javascript - event - jquery trigger change




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

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


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

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

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

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

<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 , делаем find для myValue и выбираем его с помощью .prop() :

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

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

dataClsField.val(myValue);

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

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

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


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

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

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

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


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

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

а не с

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

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

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

или же

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

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

Фу!

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


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

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

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

$.clientID("_statusDDL")

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

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

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

Вы, скорее всего, захотите этого:

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

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

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





html-select