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

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

$("._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;

Примечание:

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

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

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

как

<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.So согласно вышеуказанным решениям, если вы используете

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

EDIT: добавьте одинарную кавычку вокруг " + 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(), но ваш селектор . может использоваться только в том случае, если он соответствует a класс в раскрывающемся списке, и вы должны использовать кавычки на значение внутри круглой скобки, или просто использовать переменную, которую мы установили ранее:

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

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

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

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

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

$.clientID("_statusDDL")

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

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

Если вы используете один из методов Ajax jQuery, вы можете указать функцию обратного вызова, а затем поставить $("._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", "");