Question

我有两个按钮下拉，如下所示

<select id="BrandNames" class="m-wrap" tabindex="1" style="width:100%;">
   <option class="placeholder" selected="" disabled="">Select Brand</option>
   <option value="3000">General</option>
   <option value="3001">KFC</option>
   <option value="3002">Chutneys</option>
</select>
  <input type="button" id="prev"  value="prev">

  <input type="button" id="next" value="Next">

$(document).on('click', '#prev', function(event ) {
alert('Prev button called');
});



$(document).on('click', '#next', function(event ) {
alert('Next button called');
});

假设我从下拉菜单中选择了常规（第一选项）。

我的要求是，如果我选择下一步按钮或上一页按钮，如何将下拉列表恢复为我的情况下选择品牌的默认选择？？

这是我的jsfiddle

http://jsfiddle.net/8f9c71x3/

任何人都可以帮忙。

Answer 1

HTML： -

<select id="BrandNames" class="m-wrap" tabindex="1" style="width:100%;">
   <option class="placeholder" selected="" disabled="" value="">Select Brand</option>
   <option value="3000">General</option>
   <option value="3001">KFC</option>
   <option value="3002">Chutneys</option>
</select>
  <input type="button" id="prev"  value="prev">

  <input type="button" id="next" value="Next">

如上所示，在value=""下拉列表选项中添加Select Brand。

Jquery： -

$(document).on('click', '#prev', function(event ) {
   alert('Prev button called');
   $('#BrandNames').val(''); //select first option
});

$(document).on('click', '#next', function(event ) {
    alert('Next button called');
    $('#BrandNames').val(''); //select first option 
});

Working DEMO

Answer 2

您可以找到当前选择的选项。基于next / prev click，target next / prev元素并将其selected属性设置为true：

$(document).on('click', '#prev', function(event ) {
   $('#BrandNames option:Selected').prev().prop('selected','true')
});
$(document).on('click', '#next', function(event ) {
  $('#BrandNames option:Selected').next().prop('selected','true');
});

<强> Working Demo

单击按钮，如何使下拉菜单返回默认选择

2 个答案: