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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

или

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

Ответ 3

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

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

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

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

Ответ 4

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

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

а не с

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

Ответ 5

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

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

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

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

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

Примечание:

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

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

Ответ 6

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

Фу!

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

Ответ 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.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" на граничном языке.

SO МОЕ ЗАКЛЮЧИТЕЛЬНОЕ РЕШЕНИЕ НА ЭТОМ РЕГИСТРЕ

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

EDIT: добавьте одиночную кавычку вокруг "+ newselectedIndex +", чтобы использовать одни и те же функции для нечисловых значений.

Итак, что я делаю на самом деле, удалил выбранный атрибут, а затем сделал новый выбранным.

Я хотел бы получить комментарии по этому поводу от старших программистов, таких как @strager, @y0mbo, @ISIK и другие.

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

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

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

dataClsField.val(myValue);

Ответ 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)
            );
        });
    }
});

Ответ 10

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

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

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

$.clientID("_statusDDL")

Ответ 11

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

Ответ 12

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

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

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

Ответ 13

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

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

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

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

Ответ 14

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

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

Ответ 15

<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 = "Статический"

$('#DropUserType').val('1');