基于加减按钮实现select下拉框相邻选项切换的功能失效求助

你写的代码其实可以正常触发，只是做的事情和“切换下拉选中值”完全没关系，控制台不报错也是因为代码语法本身没有问题，只是逻辑没有落地：

• jQuery 的 .val() 方法，不传参的时候是取值操作，传参的时候才是赋值设置。你当前写的两行代码，本质是从当前选中的 option 找到相邻节点，读取了下它的 value 值，读完没有任何后续操作——既没把这个值写到 select 控件上，也没给相邻的 option 加选中标记，页面自然不会产生任何变化。
• 缺少边界处理：如果当前已经选中选项列表的第一个/最后一个节点，prev()/next() 会返回空的元素集合，就算后续补上赋值逻辑，空集合上的操作也是静默失败，不会抛出任何报错提示。

function AddQta() {
  const $select = $('#ctl00_ContentPlaceHolder1_ddlQta');
  const currentSelected = $select.find('option:selected');
  const nextOption = currentSelected.next();
  // 存在下一个选项才执行切换，避免到列表末尾的无效操作
  if (nextOption.length) {
    $select.val(nextOption.val());
  }
}

function LessQta() {
  const $select = $('#ctl00_ContentPlaceHolder1_ddlQta');
  const currentSelected = $select.find('option:selected');
  const prevOption = currentSelected.prev();
  // 存在上一个选项才执行切换，避免到列表开头的无效操作
  if (prevOption.length) {
    $select.val(prevOption.val());
  }
}

• 把目标 option 的值传给 select 的 .val() 方法，是 jQuery 中设置下拉框选中状态的标准写法，不需要手动给 option 标签添加 selected 属性
• 增加的存在性判断做了边界兼容，在选项列表首尾位置点击按钮不会触发异常行为，交互体验更合理
• 提前缓存 select 的 jQuery 实例，减少重复 DOM 查询的不必要性能消耗

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