У меня есть выпадающий список с известными значениями. Я пытаюсь установить в выпадающем списке определенное значение, о существовании которого я знаю, используя 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's documentation states:
[jQuery.val] проверяет, или выбирает, все радиокнопки, чекбоксы и опции выбора, которые соответствуют набору значений.
Такое поведение реализовано в jQuery
версий 1.2
и выше.
Скорее всего, вам нужно именно это:
$("._statusDDL").val('2');
Со скрытым полем вам нужно использовать вот так:
$("._statusDDL").val(2);
$("._statusDDL").change();
или
$("._statusDDL").val(2).change();
Просто к вашему сведению, вам не нужно использовать классы CSS для этого.
Вы можете написать следующую строку кода, чтобы получить правильное имя управления на клиенте:
$("#<%= statusDDL.ClientID %>").val("2");
ASP.NET правильно отобразит идентификатор управления внутри jQuery.
Просто попробуйте с
$("._statusDDL").val("2");
, а не с
$("._statusDDL").val(2);
Посмотрев на некоторые решения, это сработало для меня.
У меня есть один раскрывающийся список с некоторыми значениями, и я хочу выбрать то же значение из другого раскрывающегося списка... Поэтому сначала я вставил переменную selectIndex
моего первого раскрывающегося списка.
var indiceDatos = $('#myidddl')[0].selectedIndex;
Затем я выбираю этот индекс в своем втором раскрывающемся списке.
$('#myidddl2')[0].selectedIndex = indiceDatos;
Примечание:
Я думаю, это самое короткое, надежное, общее и элегантное решение.
Потому что в моем случае я использую атрибут данных выбранного параметра вместо атрибута value. Поэтому, если у вас нет уникального значения для каждого варианта, метод выше - самый короткий и сладкий!!
Эти решения предполагают, что каждый элемент в ваших выпадающих списках имеет значение 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
Уф !!
Надеюсь, это поможет.
Я знаю, что это старый вопрос, и вышеуказанные решения работают нормально, за исключением некоторых случаев.
Подобно
<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 и показать «элемент 3», выбранный вместо элемента 4. Так, как в соответствии с вышеуказанными решениями, если вы используете
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» на разных языках.
ТАК МОЕ ЗАКЛЮЧИТЕЛЬНОЕ РЕШЕНИЕ НА ЭТОМ ОТНОШЕНИИ
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, и при использовании селектора jQuery требуется время, чтобы настроить его на clientId. Чтобы исправить проблему, с которой вы сталкиваетесь, и избежать необходимости добавлять свойство 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 CLient - это тоже может вам помочь:
<asp:DropDownList id="MyDropDown" runat="server" />
$("[id* = 'MyDropDown']").append("<option value='-1'> </option>"); //etc
Обратите внимание на подстановочный знак id * - он найдет ваш элемент, даже если имя «ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown»
Я использую функцию расширения, чтобы получить идентификаторы клиентов, вот так:
$.extend({
clientID: function(id) {
return $("[id$='" + id + "']");
}
});
Затем вы можете вызвать элементы управления ASP.NET в jQuery следующим образом:
$.clientID("_statusDDL")
<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');
<asp:DropDownList id="MyDropDown" runat="server" />
Используйте $ ("select [name $ = 'MyDropDown']") .val ()
.
Как вы загружаете значения в выпадающий список или определяете, какое значение нужно выбрать? Если вы делаете это с помощью Ajax, то причина, по которой вам нужна задержка перед выбором, может заключаться в том, что значения не были загружены в момент выполнения рассматриваемой строки. Это также объясняет, почему все работает, когда вы помещаете в строку оператор оповещения перед установкой статуса, поскольку действие оповещения дает достаточную задержку для загрузки данных.
Если вы используете один из методов jQuery' Ajax, вы можете указать функцию обратного вызова, а затем поместить $("._statusDDL").val(2);
в свою функцию обратного вызова.
Это более надежный способ решения проблемы, поскольку можно быть уверенным, что метод выполнится, когда данные будут готовы, даже если это займет более 300 мс.
В моем случае я смог заставить его работать с помощью метода .attr ().
$("._statusDDL").attr("selected", "");