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

Коли я ставлю сповіщення трохи вище, воно працює добре, але коли я видаляю попередження і даю йому працювати на повній швидкості, я отримую помилку

Не вдалося встановити вибрану властивість. Недійсний індекс

Я не впевнений, що це помилка з jQuery або Internet Explorer 6 (я здогадуюсь Internet Explorer 6 ), але це жахливо дратує.

Документація jQuery зазначає:

[jQuery.val] перевіряє або вибирає всі радіо кнопки, прапорці та вибирає параметри, що відповідають набору значень.

Така поведінка є у 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");

Для встановлення вибраного індексу випадаючого списку ви скористаєтесь цим:

$("#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.Так, згідно з наведеними вище рішеннями, якщо ви використовуєте

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.

ТАК МОЕ ОКОНЧЕ РІШЕННЯ НА ЦІЙ ЗВІТІ

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

dataClsField.val(myValue);

Тож я змінив його так, що тепер він виконується через 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)
            );
        });
    }
});

Лише зауваження - я використовував селекторні символи в jQuery, щоб захопити елементи, які затуманені ідентифікаторами клієнта ASP.NET - це також може допомогти вам:

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

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

Зверніть увагу на id * wildcard - це знайде ваш елемент, навіть якщо ім'я "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"

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

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

Тоді ви можете викликати елементи керування ASP.NET в jQuery таким чином:

$.clientID("_statusDDL")

Інший варіант - встановити параметр керування ClientID = "Static" в .net, і тоді ви можете отримати доступ до об'єкта в JQuery за допомогою встановленого вами ідентифікатора.

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

Використовуйте $("select[name$='MyDropDown']").val().

Як ви завантажуєте значення у випадаючий список або визначаєте, яке значення вибрати? Якщо ви робите це за допомогою Ajax, то причина, з якою вам потрібна затримка до того, як відбудеться вибір, може бути тому, що значення не завантажувалися в той момент, коли виконується відповідний рядок. Це також пояснило б, чому він працював, коли ви ставили на рядок заяву попередження перед встановленням статусу, оскільки дія оповіщення дасть достатньо затримки для завантаження даних.

Якщо ви використовуєте один з методів Ajax jQuery, ви можете вказати функцію зворотного дзвінка, а потім $("._statusDDL").val(2);увімкнути функцію зворотного дзвінка.

Це був би більш надійний спосіб вирішення проблеми, оскільки ви можете бути впевнені, що метод, виконаний, коли дані були готові, навіть якщо це зайняло більше 300 мс.

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

У моєму випадку мені вдалося змусити його працювати, використовуючи метод .attr ().

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