Question

我的下一个和上一个按钮的选择列表是here。我的两个独立列表是here，当我从第一个列表中选择任何选项时，在从第二个列表中选择任何选项后，我的第一个列表将被重置。我想结合这两个例子，并获得两个列表，其中包含唯一的下一个/上一个按钮。当第一个列表处于活动状态时，按钮会在其中移动，当第二个列表处于活动状态时，使用相同的按钮会移动它。有可能吗？

Terafor和Mahesh，感谢您的回答，但是当我从下一个列表中选择任何一个时，前一个按钮被禁用。

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

Answer 1

当然有可能！您只需要记住哪个列表具有焦点，然后在按钮导航中使用它;

http://jsfiddle.net/KZFcb/ //编辑：链接更正

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

您需要添加的是在元素获得焦点时正确禁用按钮的逻辑。

Answer 2

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>

JQUERY

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

});

两个选择列表，带有下一个/上一个按钮

2 个答案: