Question

我已经完成了上一个和下一个的下拉菜单。我想知道如何每n秒自动更改下拉选项值。 https://jsfiddle.net/wmwayysz/

 <script  
 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">    
 </script>
 <button type="button" id="prev">Previous</button>
<select id="selectBox" onchange="currentSlide(value);" class="selectpicker">
 <option value="1" class="options">Electronics</option>
 <option value="2" class="options">Clothing</option>
 <option value="3" class="options">Health</option>
  <option value="4" class="options">Food</option>
 <option value="5" class="options">Travel</option>
 <option value="6" class="options">Mobiles</option>
 <option value="7" class="options">Grocery</option>
 <option value="8" class="options">Recharge</option>
 <option value="9" class="options">Furniture</option>

下一步

 $.fn.loopNext = function(selector) {
   var selector = selector || '';
     return this.next(selector).length ? this.next(selector) :       
    this.siblings(selector).addBack(selector).first();
   }
  $.fn.loopPrev = function(selector) {
    var selector = selector || '';
    return this.prev(selector).length ? this.prev(selector) :    
      this.siblings(selector).addBack(selector).last();
   }
    $("#next").click(function() {
    $('#selectBox > option:selected')
        .removeAttr('selected')
       .loopNext('option')
          .prop('selected', 'selected');
    });

  $("#prev").click(function() {
     $('#selectBox > option:selected')
     .removeAttr('selected')
       .loopPrev('option')
         .prop('selected', 'selected');
   });

  function currentSlide(selectionValue) {
      console.log(selectionValue);
    }

Answer 1

试试这个

setInterval(function() {
    $('#next').trigger('click');
}, 30000)

Answer 2

您必须在接下来使用的某个时间间隔之后调用相同的代码迭代。所以公共代码进入功能。这是它的小提琴。 https://jsfiddle.net/wmwayysz/2/

这是您的javascript更新代码

$.fn.loopNext = function(selector) {
  var selector = selector || '';
  return this.next(selector).length ? this.next(selector) : this.siblings(selector).addBack(selector).first();
}
$.fn.loopPrev = function(selector) {
  var selector = selector || '';
  return this.prev(selector).length ? this.prev(selector) : this.siblings(selector).addBack(selector).last();
}
$("#next").click(funShowNext);
setInterval(funShowNext,3000);

function funShowNext() {
  $('#selectBox > option:selected')
    .removeAttr('selected')
    .loopNext('option')
        .prop('selected', 'selected');
}

$("#prev").click(function() {
  $('#selectBox > option:selected')
    .removeAttr('selected')
    .loopPrev('option')
        .prop('selected', 'selected');
});

function currentSlide(selectionValue) {
  console.log(selectionValue);
}

如何每30秒自动切换下拉选项

2 个答案: