使用带有jquery的下一个/上一个按钮从选择列表中选择选项 [英] Choose option from select list using next/previous button with jquery

问题描述

使用jquery使用next / previous按钮导航选择选项的最佳方法是什么？我有一个选择列表，当更改也改变一些div。我想在选择列表的左侧和右侧有一个下一个和上一个按钮，而不仅仅是一个下拉列表。

What is best way to navigate select option using next/previous button with jquery? I have a select list when change also changes some div. Instead of just a dropdown, I want to have a next and previous button on the left and right sides of the select list.

我真的没弄清楚，我试过attr但只有在我手动输入属性时才有效。

I cant really figure out, i tried attr but only working if I manually type the attributes.

<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>

提前致谢。

推荐答案

描述

您可以使用jQuery的 .removeAttr（）， attr（）， .next（）和 .prev（）方法那个。

查看我的样本和 jsFiddle Demonstration

$("#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（）



More Information

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

如果选择了最后一个元素，我不知道你是否要禁用例如下一个按钮，选择第一个元素或什么也不做。请提供此信息。

I don't know if you want to disable the, for example, next button if the last element is selected, select the first one or do nothing. Please provide this information.

如果选择了最后一个元素，您可以执行此操作转到第一个元素，如果选择了第一个元素，则转到最后一个元素。

You can do this to go to this to go to the first element if the last is selected, or to the last if first is selected.

$("#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'); 
    }

});

这篇关于使用带有jquery的下一个/上一个按钮从选择列表中选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！