0

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

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

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

查询

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