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

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

не удалось задать свойство selected. Недопустимый Индекс

Я не уверен, что это ошибка с jQuery или Internet Explorer 6 (я предполагаю, что Internet Explorer 6), но это ужасно раздражающий.

16 ответов


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

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

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

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

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

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

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

или

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

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

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

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

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


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

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

, а не

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

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

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

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

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

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

$("#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

Фух !!

надеюсь, что это помогает.


после просмотра некоторых решений это сработало для меня.

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

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

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

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

Примечание:

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

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


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

как

<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"в языке sever side.

ИТАК, МОЕ ОКОНЧАТЕЛЬНОЕ РЕШЕНИЕ ПО ЭТОМУ ВОПРОСУ

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 достаточно время, чтобы вернуть объекты, которые вы добавляете в select. Небольшой образец ниже:

$.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 идентификаторы клиентов-это может помочь вам тоже:

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

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

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


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

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

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

$.clientID("_statusDDL")

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


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

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

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


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

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


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