ボタンをクリックして選択オプションを繰り返してください。

Question

これは信じられないほど簡単にできるはずですが、早朝です。空白を描いています。

私は％値（ズーム用）を含んでいるselectを持っていますが、これをドロップダウンリストとして持つと、リストを反復するための2つのボタン（+と - ）が必要です。

だから私が持っていたと仮定すると：

<button id="minusButton">-</button> 
<select id="zoomSelect" onchange="zoom()"> 
     <option value="10">10%</option> 
     <option value="20">20%</option> 
     <option value="50">50%</option> 
     <option value="100" selected="selected">100%</option> 
</select> 
<button id="plusButton">+</button> 

はどのようにしてボタンを押すたびにアップスイッチングを選択ダウンについては行くだろう。また、100％と10％でうまく止まるようにします（つまりラップラウンドがないか、+を押し続けるとエラーが発生します）。

ありがとうございました！

Answer 1

$(document).on('click', '#minusButton', function() { 
 
    var selIndex = $("#zoomSelect").prop('selectedIndex'); 
 
    if (selIndex != 0) { 
 
    $("#zoomSelect").val($('#zoomSelect option').eq(selIndex - 1).val()); 
 
    zoom(); 
 
    } 
 
}); 
 
$(document).on('click', '#plusButton', function() { 
 
    var selIndex = $("#zoomSelect").prop('selectedIndex'); 
 
    if (selIndex != $('#zoomSelect option').length - 1) { 
 
    $("#zoomSelect").val($('#zoomSelect option').eq(selIndex + 1).val()); 
 
    zoom(); 
 
    } 
 
}); 
 

 
function zoom() { 
 
    console.log('zoomed'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="minusButton">-</button> 
 
<select id="zoomSelect" onchange="zoom()"> 
 
     <option value="10">10%</option> 
 
     <option value="20">20%</option> 
 
     <option value="50">50%</option> 
 
     <option value="100" selected="selected">100%</option> 
 
</select> 
 
<button id="plusButton">+</button>

選択ボックスの値を変更し、それに応じてズーム機能をトリガするようにクリックイベントは、のように書くことができます。

Answer 2

は答えを持つこのの重複を発見 - Choose option from select list using next/previous button with jquery

だから、これを閉じることができます。

Answer 3

ピュアJSの答え

基本的にはselectedIndexを取得し、そのインデックスを設定する必要があります。

document.getElementById("zoomSelect").selectedIndexは、現在選択されているインデックスを取得し、プラスまたはマイナスのクリックに基づいて設定できます。

function zoom(isPlus) { 
 
    var zoomSelect = document.getElementById("zoomSelect"); 
 
    var index = zoomSelect.selectedIndex; 
 
    var length = zoomSelect.length; 
 

 
    if (isPlus && (index < length - 1)) { 
 
    zoomSelect.selectedIndex = index + 1; 
 
    } else if (!isPlus && (index > 0)) { 
 
    zoomSelect.selectedIndex = index - 1; 
 
    } 
 
}

<button id="minusButton" onclick="zoom(false)">-</button> 
 
<select id="zoomSelect" onchange="zoom()"> 
 
     <option value="10">10%</option> 
 
     <option value="20">20%</option> 
 
     <option value="50">50%</option> 
 
     <option value="100" selected="selected">100%</option> 
 
</select> 
 
<button id="plusButton" onclick="zoom(true)">+</button>

Answer 4

あなたは、あなたがこれまでに試してみました何

var $zoom = $('#zoomSelect'), 
 
    len = $zoom.find('option').length;; 
 
jQuery('#plusButton, #minusButton').click(function() { 
 
    var op = (this.id === 'minusButton' ? -1 : 1); 
 
    $zoom.prop('selectedIndex', function(idx, value) { 
 
    var x = value + op; 
 
    return x < 0 || x > len - 1 ? value : x; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="minusButton">-</button> 
 
<select id="zoomSelect" onchange="zoom()"> 
 
    <option value="10">10%</option> 
 
    <option value="20">20%</option> 
 
    <option value="50">50%</option> 
 
    <option value="100" selected="selected">100%</option> 
 
</select> 
 
<button id="plusButton">+</button>