如何更改下拉選項的價值從回到開始和開始回到使用JavaScript，jquery

Question

我試圖改變下拉值基於prev和下一個按鈕但如果該選項是最後一個下拉我無法去第一一個，如果該選項首先無法進入最後一個。可以this.Here任何人的幫助是小提琴代碼..

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

Answer 1

嘗試使用this solution for loopNext嘗試通過編輯您的代碼來編寫loopPrev！

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

$.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); 
 
}

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

Answer 2

試試這個

$("#next").click(function() { 
    var getIndex =$("select option:selected").index(); 
    var index=getIndex+1; 
    $("select").children().removeAttr('selected'); 
    $("select").children().eq(index).attr('selected', 'selected'); 
}); 

Working Demo

Answer 3

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

Answer 4

試試這個。其實當nextElement.length = 0，你知道，它已經在第一/最後一個選項，所以你只需要選擇相應的最後一個/第一個選項

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>

Answer 5

試試這個：

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