JQuery Установить выбранный вариант, используя следующий

Как я могу, используя jQuery, установить "следующий" элемент уже выбранного элемента как "selected".

Например, если у меня есть:

<select>
<option value="1" >Number 1</option>
<option value="2" selected="selected">Number 2</option>
<option value="3" >Number 3</option>
<option value="4" >Number 4</option>
</select>

Мы видим, что выбрано "Number 2", и с помощью jQuery я хотел бы установить "Number 3" как выбранный и удалить выбранный "атрибут" из "Номер 2". Я предполагаю, что мне нужно использовать следующий селектор, но я не совсем уверен, как его реализовать.

Ответ 1

$('option:selected', 'select').removeAttr('selected').next('option').attr('selected', 'selected');

Проверьте рабочий код здесь http://jsbin.com/ipewe/edit

Ответ 2

Update:

Как и в случае с jQuery 1.6+, вы должны использовать prop() вместо attr().

Разница между атрибутами и свойствами может быть важна в конкретных ситуациях. Перед jQuery 1.6 метод .attr() иногда учитывал значения свойств при извлечении некоторых атрибутов, что может привести к непоследовательному поведению. Начиная с jQuery 1.6,.prop() метод предоставляет способ явного извлечения значений свойств, в то время как .attr() извлекает атрибуты.

var theValue = "whatever";
$("#selectID").val( theValue ).prop('selected',true);

Оригинальный ответ:

Если вы хотите выбрать значение параметра, REGARDLESS своей позиции (в этом примере предполагается, что у вас есть идентификатор для вашего выбора):

var theValue = "whatever";
$("#selectID").val( theValue ).attr('selected',true);

Вам не нужно "отменить выбор". Это происходит автоматически при выборе другого.

Ответ 3

Начиная с версии 1.6.1, рекомендуется использовать метод prop для логических атрибутов/свойств, таких как выбранный, только для чтения, включен,...

var theValue = "whatever";
$("#selectID").val( theValue ).prop('selected',true);

Для получения дополнительной информации см. http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

Ответ 4

вы можете использовать

$('option:selected').next('option')

или

$('option:selected + option')

И установите значение:

var nextVal = $('option:selected + option').val();
$('select').val(nextVal);

Ответ 5

И если вы хотите указать select ID:

$("#nextPageLink").click(function(){
  $('#myselect option:selected').next('option').attr('selected', 'selected');
  $("#myselect").change();
});

Если вы нажмете на элемент с идентификатором "nextPageLink", будет выбран следующий параметр, и будет вызываться событие onChange(). Это может выглядеть так:

$("#myselect").change(function(){
  $('#myDivId').load(window.location.pathname,{myvalue:$("select#myselect").val()});
});

Событие OnChange() использует Ajax для загрузки чего-либо в указанный div.

window.location.pathname = фактический адрес

Событие OnChange() определено, поскольку оно позволяет вам изменять значение не только с помощью кнопки netx/prev, но и напрямую с помощью стандартного выбора. Если значение изменено, страница делает что-то автоматически.

Ответ 6

Это то, что я только что использовал, мне нравится, насколько он чист: -)

$('select').val(function(){
    var nextOption = $(this).children(':selected').next();
    return $(nextOption).val();
}).change();

Ответ 7

$('your_select option:selected').next('option').prop('selected', true)

Ответ 8

Найдите строку, затем

var row = $('#yourTable');

значение, которое вы хотите выбрать

var theValue = "5";
row.find("select:eq(2)").find("option[value="+theValue+']').attr('selected','selected');

Ответ 9

$('#next').click( function(){
    $('#colored_background option:selected').next('option').attr('selected', 'selected');
    changeBackgroundColor();
});

Работает на Какой мой любимый цвет?. Нажмите стрелки.

Ответ 10

  $("select").prop("selectedIndex",$("select").prop("selectedIndex")+1)

Ответ 11

$('#my_sel').val($('#my_sel option:selected').next().val());
$('#my_sel').val($('#my_sel option:selected').prev().val());