点击按钮设置select选中选项501仅首次生效，求助排查问题

我帮你排查下这个问题，核心原因是操作表单元素选中状态时混淆了jQuery的attr()和prop()用法，再加上代码里的冗余操作导致状态冲突，才出现首次点击正常、第二次跳回第一个选项的情况。

问题根源拆解 #

1. 你用attr('selected', 'selected')设置选项选中状态，但selected是DOM元素的属性（property），不是HTML标签的特性（attribute）。首次点击时HTML特性可能临时生效，但后续操作中DOM实际状态和HTML特性脱节，就会出现异常。
2. 代码里同时执行了jQuery('.state_autocomplete').attr('value', 'Pernambuco')和设置option的selected，这两个操作互相冲突，第二次点击时select的value被强制重置，导致选中状态跳回。

修正后的代码 #

我帮你简化了逻辑，直接用更可靠的val()方法设置select值，同时添加标记区分首次/非首次点击：

// 全局标记：记录是否已经执行过首次点击操作
let isFirstClick = true;

function test() {
  if (!isFirstClick) {
    // 非首次点击：重置为第一个选项
    jQuery('.state_autocomplete').val(jQuery('.state_autocomplete option:first').val());
    return;
  }
  
  // 首次点击：设置选中值为501的选项
  jQuery('.state_autocomplete').val('501');
  // 标记为已完成首次操作
  isFirstClick = false;
}

为什么这样有效？ #

• jQuery的val()方法会自动处理select的选中状态，直接操作DOM的value属性，比手动设置option的selected更稳定可靠。
• 通过isFirstClick标记明确区分两次点击的逻辑，完全匹配你"首次设为501，第二次跳回第一个选项"的需求。

额外优化提示 #

如果你的需求是仅首次点击生效，之后点击不再有任何操作，可以改成解绑点击事件的方式，更简洁：

function test() {
  jQuery('.state_autocomplete').val('501');
  // 解绑当前按钮的点击事件，确保只执行一次
  jQuery(this).off('click');
}

内容的提问来源于stack exchange，提问作者Ki Lo