为选项填充所选内容不正确

Question

我想单击按钮然后使用选项501设置选择。但是，它仅在第一次点击时有效。第二次单击，然后转到第一个选项。有人知道这个问题吗？

function test() {
  jQuery('.state_autocomplete option').removeAttr('selected');
  jQuery('.state_autocomplete').attr('value', 'Pernambuco');
  
  jQuery('.state_autocomplete option').each(function() {
    if (jQuery(this).val() == 501) {
      jQuery(this).attr('selected', 'selected');
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="billing:region_id" name="billing[region_id]" title="Estado" class="form-control validate-select state_autocomplete required-entry" style="" defaultvalue="" value="Pernambuco">
    <option value="">Selecione...</option>
    <option value="496">Minas Gerais</option>
    <option value="499">Paraná</option>
    <option value="498">Paraíba</option>
    <option value="497">Pará</option>
    <option value="500" >Pernambuco</option>
    <option value="501">Piauí</option>
</select>
<button onclick="test()" value='b'>aaa</button>

Answer 1

你的逻辑比它需要的要复杂得多。只需使用 val() 的设置器即可更改所选选项。还应删除按钮上的内联onclick处理程序。请改用不显眼的事件处理程序。像这样：

$('#set').click(function() {
  $('.state_autocomplete').val('501');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="billing:region_id" name="billing[region_id]" title="Estado" class="form-control validate-select state_autocomplete required-entry" style="" defaultvalue="" value="Pernambuco">
  <option value="">Selecione...</option>
  <option value="496">Minas Gerais</option>
  <option value="499">Paraná</option>
  <option value="498">Paraíba</option>
  <option value="497">Pará</option>
  <option value="500" >Pernambuco</option>
  <option value="501">Piauí</option>
</select>
<button id="set" value='b'>aaa</button>