javascript - jQueryで次のオプションを選択

Question

次のオプションを選択できるボタンを作成しようとしています。

だから、私はいくつかのオプション、次の入力（id = fieldNext）を持つ選択（id = selectionChamp）を持っています、そして私はそれをやろうとします：

$('#fieldNext').click(function() {
    $('#selectionChamp option:selected', 'select').removeAttr('selected')
          .next('option').attr('selected', 'selected');

    alert($('#selectionChamp option:selected').val());      
});

しかし、次のオプションを選択できません..ありがとう！

score 38 · Accepted Answer

$('#fieldNext').click(function() {
    $('#selectionChamp option:selected').next().attr('selected', 'selected');

    alert($('#selectionChamp').val());      
});

@VisioN によるより良い回答: https://stackoverflow.com/a/11556661/1533609

score 22 · Accepted Answer

$("#fieldNext").click(function() {
    $("#selectionChamp > option:selected")
        .prop("selected", false)
        .next()
        .prop("selected", true);
});

デモ: http://jsfiddle.net/w9kcd/1/

score 10 · Accepted Answer

jQueryがなくてもかなりシンプルです。これは、最後のオプションに到達すると、最初のオプションにループします。

function nextOpt() {
  var sel = document.getElementById('selectionChamp');
  var i = sel.selectedIndex;
  sel.options[++i%sel.options.length].selected = true;
}

window.onload = function() {
  document.getElementById('fieldNext').onclick = nextOpt;
}

いくつかのテストマークアップ:

<button id="fieldNext">Select next</button>
<select id="selectionChamp">
 <option>0
 <option>1
 <option>2
</select>

score 3 · Accepted Answer

$(function(){
  $('#button').on('click', function(){
    var selected_element = $('#selectionChamp option:selected');
    selected_element.removeAttr('selected');
    selected_element.next().attr('selected', 'selected');

    $('#selectionChamp').val(selected_element.next().val());

  });
});

http://jsbin.com/ejunoz/2/edit

score 0 · Accepted Answer

これを試して：

    $(document).ready(function(){
        $("#fieldNext").on("click",function(){
            $optionSelected = $("#selectionChamp > option:selected");
            $optionSelected.removeAttr("selected");
            $optionSelected.next("option").attr("selected","selected");       
        });
    });

score 0 · Accepted Answer

$('#fieldNext').click(function() {
$('#selectionChamp option:selected').removeAttr('selected')
      .next('option').attr('selected', 'selected');

alert($('#selectionChamp option:selected').val());      
});

score 0 · Accepted Answer

option 要素に加えて optiongroup 要素がある場合、他のソリューションは機能しません。その場合、これはうまくいくようです：

var options = $("#selectionChamp option");
var i = options.index(options.filter(":selected"));
if (i >= 0 && i < options.length - 1) {
    options.eq(i+1).prop("selected", true);
}

i( for の式はのようにも書けると思うかもしれoptions.index(":selected")ませんが、常にうまくいくとは限りません。理由はわかりません。説明を歓迎します。)

javascript - jQueryで次のオプションを選択

8 に答える 8

Related

Reference