多次更改<select>元素的选定值

Question

我可以设置所选值没问题 - Stack-Overflow上已经存在很多关于该问题的答案.

我的问题是如何继续更改所选值？

我首先想到的是我只是从选项中删除"selected"属性,然后重新设置目标选项的"selected"属性.

它工作了!!

---一个循环.

看起来你只能在它被卡在第一个选项上并且不响应更改之前更改所选值'x'的次数.

$('#btn_25').on('click', function(e) {
   $('#my_selector option').attr('selected', false);
    $('#my_selector option[value=' + 25 + ']').attr('selected', true);
});

$('#btn_50').on('click', function(e) {
   $('#my_selector option').attr('selected', false);
    $('#my_selector option[value=' + 50 + ']').attr('selected', true);
});

$('#btn_100').on('click', function(e) {
   $('#my_selector option').attr('selected', false);
    $('#my_selector option[value=' + 100 + ']').attr('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my_selector">
    <option value="25">Twenty Five</option>
    <option value="50">Fifty</option>
    <option value="100">One Hundred</option>
</select>

<button id="btn_25">25</button>
<button id="btn_50">50</button>
<button id="btn_100">100</button>

如果你从左到右依次点击两次按钮,你会发现自己陷入了25的价值.至少,我做到了.

我的问题是---这是我的代码问题吗？使用JQuery(我非常怀疑)？使用FireFox(版本41.0.1)？

如果问题出在我的代码中 - 需要更改哪些内容以允许连续设置select-element的值？

Answer 1

您应该使用.val()方法来设置select值.您还应该使用公共类来绑定事件,需要设置的值可以存储在自定义data-*前缀属性中,可以使用.data()

$(function() {
  $('.btn').on('click', function(e) {
    $('#my_selector').val($(this).data('value'));
  }); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my_selector">
  <option value="25">Twenty Five</option>
  <option value="50">Fifty</option>
  <option value="100">One Hundred</option>
</select>

<button type="button" class="btn" data-value="25">25</button>
<button type="button" class="btn" data-value="50">50</button>
<button type="button" class="btn" data-value="100">100</button>