0

次と前のボタンがある私の選択リストはこちらです。私の 2 つの独立したリストはここにあります。最初のリストから任意のオプションを選択し、2 番目のリストから任意のオプションを選択すると、最初のリストがリセットされます。2 つの例を組み合わせて、独自の次へ/前へのボタンを備えた 2 つのリストを取得したいと思います。最初のリストがアクティブな場合はボタンを使用して移動し、2 番目のリストがアクティブな場合は同じボタンを使用して移動します。出来ますか？

Terafor と Mahesh さん、ご回答ありがとうございます。ただし、2 番目のリストからいずれかを選択すると、[次へ] ボタンと [前へ] ボタンが無効になります。

$('#second').change(function () {
var val = $(this).val();
if (val == 'a','b') {
    $('#first').val('');
  }
});
4

2 に答える 2

1

もちろん可能です！どのリストにフォーカスがあるかを覚えておき、それをボタン ナビゲーションで使用するだけです。

http://jsfiddle.net/KZFcb/ //編集: リンク修正

var isInFocus;
$('select').focus(function(){
   isInFocus = $(this);
});

追加する必要があるのは、要素がフォーカスを得たときにボタンを正しく無効にするロジックです。

于 2013-05-24T12:21:31.133 に答える
0

HTML

<select id="first" class="dropdown">
<option value="">Choose an option...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option> 
       </select>
<hr>

     <select id="second" class="dropdown">
<option value="">Choose an option...</option>
<option value="a">Option a</option>
<option value="b">Option b</option>
<option value="c">Option c</option>
<option value="d">Option d</option>
<option value="e">Option e</option>
<option value="f">Option f</option>
<option value="g">Option g</option>
<option value="h">Option h</option>
<option value="i">Option i</option>
<option value="j">Option j</option>
<option value="k">Option k</option>
<option value="l">Option l</option>
<option value="m">Option m</option>
<option value="n">Option n</option> 
       </select>
    <hr>
<button id="prev" class="prevbutton">Previous</button>
<button id="next" class="nextbutton">Next</button>

Jクエリ

    $(document).ready(function() {
   $('#first').on('change', function(){
       $('select').removeClass('activeList');
        $(this).addClass('activeList');
    });
    $('#second').on('change', function(){
       $('select').removeClass('activeList');
        $(this).addClass('activeList');
    });

    $(".nextbutton").button({ disabled: true });

    $('.dropdown').change(function() {
        $(this).find('option').last().attr({'data-last' : 'lastList'});

        if ($('.activeList').val() == 0) {
          $(".prevbutton").button({ disabled: true });
        } else if ($('option:selected', this).attr('data-last') === 'lastList') {
            $(".nextbutton").button({ disabled: true });
        } else {
          $(".nextbutton").button({ disabled: false });
          $(".prevbutton").button({ disabled: false });
        }
    });
    $(".prevbutton").button({ disabled: true });

    $("#next").click(function() {

      var nextElement = $('.activeList > option:selected').next('option');

      if (nextElement.length > 0) {
        $('.activeList > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
      $('.activeList').trigger('change');      
      }
    });

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

});
于 2013-05-24T12:07:48.160 に答える