Выберите опцию из списка выбора, используя кнопку «следующий / предыдущий» с jquery

Question

Каков наилучший способ навигации по опции выбора, используя кнопку «следующий / предыдущий» с jquery?У меня есть список выбора, когда изменение также меняет некоторые div.Вместо выпадающего списка я хочу, чтобы слева и справа от списка выбора располагалась кнопка «Далее» и «Предыдущий».

<button type="button" id="prev">Previous</button>
<select id="mycars">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>
<button type="button" id="next">Next</button>

Заранее спасибо.

Answer 1

Описание

Для этого вы можете использовать методы jQuery .removeAttr(), attr(), .next() и .prev().

Посмотрите мой образец и эту демонстрацию jsFiddle

Пример

$("#next").click(function() {
  var nextElement = $('#mycars > option:selected').next('option');
  if (nextElement.length > 0) {
    $('#mycars > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
  }
});

$("#prev").click(function() {
  var nextElement = $('#mycars > option:selected').prev('option');
  if (nextElement.length > 0) {
    $('#mycars > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
  }
});

Дополнительная информация

• jQuery.removeAttr ()
• jQuery.attr ()
• jQuery.next ()
• jQuery.prev ()

Обновление

Не знаю, хотите ли вы, например, отключить кнопку «Далее», если выбран последний элемент, выберите первый или ничего не делайте. Пожалуйста, предоставьте эту информацию.

Вы можете сделать это, чтобы перейти к первому элементу, если выбран последний, или к последнему, если выбран первый.

$("#next").click(function() {
    var isLastElementSelected = $('#mycars > option:selected').index() == $('#mycars > option').length -1;

    if (!isLastElementSelected) {     
        $('#mycars > option:selected').removeAttr('selected').next('option').attr('selected', 'selected'); 
    } else {
           $('#mycars > option:selected').removeAttr('selected');
           $('#mycars > option').first().attr('selected', 'selected'); 
     }   
});

$("#prev").click(function() {
    var isFirstElementSelected = $('#mycars > option:selected').index() == 0;

    if (!isFirstElementSelected) {
       $('#mycars > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
    } else {
         $('#mycars > option:selected').removeAttr('selected');
         $('#mycars > option').last().attr('selected', 'selected'); 
    }

});

Обновлен jsFiddle

Answer 2

Вот хорошая короткая версия, которая не оборачивается ни на одном конце:

$("#next, #prev").click(function() {
    $("#mycars :selected")[this.id]().prop("selected", true);
});

Обратите внимание, что это зависит от id кнопок: next и prev, которыми они являютсяв вашем примере.

Вот рабочий пример .

Использование prop вместо attr означает, что мы фактически меняем свойство, а не значение атрибута,Это означает, что нет необходимости использовать removeAttr, как в других ответах, что означает, что мы не застряли в первом или последнем варианте.

Answer 3

Как-то так должно работать -

$("#next").click(function() {
    $("#mycars").val($("#mycars > option:selected").next().val());
})

$("#prev").click(function() {
    $("#mycars").val($("#mycars > option:selected").prev().val());
})

Интересно, что это будет "обход" (вернитесь к опции "Volvo" после "Audi") при использовании следующей кнопки, но остановитесь наОпция Volvo при использовании кнопки «Назад».Вот демо -

http://jsfiddle.net/aQSSG/

Answer 4

, чтобы установить выбранное значение списка, вы должны попробовать что-то вроде этого:

$("#mycars").val("saab");