使用pretty-dropdowns时HTML下拉列表手动选值后原生select值不更新

问题原因 #

pretty-dropdowns 库初始化后会隐藏原生 <select> 元素，自行渲染一套自定义DOM结构作为交互入口。默认通过自定义UI选择选项时，库只会更新自身维护的UI状态，不会主动同步修改原生 <select> 的选中值，因此直接读取原生 <select> 的 value 始终会返回初始值；调用 refresh() 方法时库会读取原生 <select> 的当前值重绘UI，自然会回到初始的 true 状态。

解决方案 #

方案1：使用库内置API操作（推荐）

避免直接操作原生 <select>，使用库提供的方法读写值，会自动同步原生元素和自定义UI状态，无需额外调用refresh()：

• 获取当前选中值：

$dropdown.prettyDropdown('val')

• 设置选中值：

$dropdown.prettyDropdown('val', 'false')

方案2：手动同步原生<select>状态

如果必须直接操作原生 <select>，可以在你绑定的change回调里手动同步选中值，修改对应的change函数即可：

function change(id) {
  // 读取自定义UI的当前选中值
  const selectedVal = $(`#${id}`).next('.prettydropdown').find('.selected').data('value')
  // 手动更新原生select的选中值
  document.getElementById(id).value = selectedVal
  // 保留你原有change函数的其他逻辑
}

修改后通过界面选择选项时原生<select>的值会同步更新，再调用refresh()也不会回到初始状态。

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