如何使用javascript，jquery从下到开始以及从开始到开始更改下拉选项值

时间：2016-11-21 07:09:51

标签： javascript jquery dropdown

我试图根据prev和next按钮更改下拉值但是如果该选项是下拉列表中的最后一个，则无法转到第一个，如果该选项是第一个，则无法转到最后一个。任何人都可以帮忙。这里是小提琴代码.. 

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

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

function currentSlide(selectionValue) {
  console.log(selectionValue);
}
<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>
</select>
<button type="button" id="next">Next</button>

5 个答案:

答案 0 :(得分：2)

尝试使用this solution for loopNext尝试通过编辑代码来编写loopPrev的代码！

使用prop to set property instead of attr更改下拉列表中的选定值。

＆＃13;
＆＃13; 
$.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);
}
＆＃13; 
<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>
</select>
<button type="button" id="next">Next</button>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

试试这个。实际上当nextElement.length = 0时，你知道它已经是第一个/最后一个选项了，所以你只需要选择相应的last / first选项

var total_options = $('#selectBox option').length;

$("#next").click(function() {
  var curr_op = $('#selectBox').val();
  if (++curr_op > total_options) curr_op = 1;
  $('#selectBox').val(curr_op);
});

$("#prev").click(function() {
  var curr_op = $('#selectBox').val();
  if (--curr_op < 1) curr_op = total_options;
  $('#selectBox').val(curr_op);
});

function currentSlide(selectionValue) {
  console.log(selectionValue);
}
<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>
</select>
<button type="button" id="next">Next</button>

答案 2 :(得分：1)

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

  $("#prev").click(function() {
    var selectedIndex = $("#selectBox > option:selected").index();
    var nextElement = $('#selectBox > option:selected').prev('option');
    if(selectedIndex == 0){
        $('#selectBox option').last().prop('selected',true);
    }else if (nextElement.length > 0) {
 $('#selectBox > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
    }
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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>
</select>
<button type="button" id="next">Next</button>

答案 3 :(得分：1)

试试这个：

$(function() {
  $("#next").click(function() {
    var nextElement = $('#selectBox > option:selected').next('option');
    if (nextElement.length > 0) {
      nextElement.prop('selected', 'selected');
    } else {
      $('#selectBox > option:eq(0)').prop('selected', 'selected');

    }
  });

  $("#prev").click(function() {
    var nextElement = $('#selectBox > option:selected').prev('option');
    if (nextElement.length > 0) {
      nextElement.prop('selected', 'selected');
    } else {
      var lastIndex = ($("#selectBox > option").length) - 1;

      $('#selectBox > option:eq(' + lastIndex + ')').prop('selected', 'selected');
    }
  });
});

function currentSlide(selectionValue) {
  console.log(selectionValue);
}
<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>
</select>
<button type="button" id="next">Next</button>

答案 4 :(得分：0)

试试这个

  IEnumerable<DataRow> rows_query = from r in dt.AsEnumerable()
                              where !(list_coupon.Contains(r.Field<string>("Couponid")) &&
                              r.Field<string>("STATE") == "A")
                              select r;

  dt = rows_query.CopyToDataTable();

<强> Working Demo

相关问题
最新问题