如何通过jQuery设置Slim Select选中项？重置选中值失效问题处理

SlimSelect在初始化时会把原生<select>标签隐藏，单独生成一套自定义的选择器DOM结构，同时在内部维护自己的选中状态缓存。
你用jQuery直接修改原生select的value属性时，只会修改底层原生控件的值，SlimSelect内部的状态和自己渲染的界面完全感知不到这个变化——它还存着你上次选过的国家值，等你把下拉容器从隐藏改成显示时，会直接把自己缓存的旧选中值渲染出来，这就是为什么原生场景下能用的val(0)重置逻辑失效、切回0再切回大于0的选项时还会保留旧选中值的根本原因。

• 第一步：初始化SlimSelect时把每个组件的实例存为全局可访问的变量，不能new完就丢弃实例，不然没法调用组件自带的方法
  原来的初始化代码是直接生成实例没存储，改成下面的写法：

  // 存储SlimSelect实例，后续重置、更新都要用到
  const selectNazioneSlim = new SlimSelect({
      select: '#select_nazione'
  })
  const levelIncaricoSlim = new SlimSelect({
      select: '#level_incarico'
  })
  // 其余级联下拉（select_regione、select_provincia、select_comune）如果也用了SlimSelect，同样把实例存下来
  const selectRegioneSlim = new SlimSelect({ select: '#select_regione' })
  const selectProvinciaSlim = new SlimSelect({ select: '#select_provincia' })
  const selectComuneSlim = new SlimSelect({ select: '#select_comune' })
  

• 第二步：把所有原来靠jQuery修改原生select值的重置逻辑，替换为调用SlimSelect实例自带的.set()方法
  这个方法会同时更新组件内部状态、同步修改底层原生select的值、刷新自定义渲染的界面，保证全链路状态一致。比如要把国家下拉重置回值为0的选项，就写selectNazioneSlim.set('0')，注意传入的值要和option上的value字符串类型完全匹配。
• 第三步：修改原来的change事件逻辑，替换所有无效的原生重置代码
  修改后的完整change事件逻辑如下：

  $("#level_incarico").change(function(){
      var option_selected = $('option:selected', this).attr('value');
      document.getElementById('level_incarico_selected').value = option_selected;
  
      if (option_selected > 0) {
          $('.nazione').css('display','block');
          $('.regione').css('display','none');
          $('.provincie').css('display','none');
          $('.comune').css('display','none');
          $('.altro_nazione').css('display','none');
          // 用SlimSelect自带方法重置，替代原来的.val(0)
          selectRegioneSlim.set('0');
          selectProvinciaSlim.set('0');
          selectComuneSlim.set('0');
          selectNazioneSlim.set('0');
          $("#altro_input_nazioni").val("");
      } else {
          $('.nazione').css('display','none');
          $('.regione').css('display','none');
          $('.provincie').css('display','none');
          $('.comune').css('display','none');
          $('.altro_nazione').css('display','none');
          // 同样替换为API调用
          selectNazioneSlim.set('0');
          selectRegioneSlim.set('0');
          selectProvinciaSlim.set('0');
          selectComuneSlim.set('0');
          $("#altro_input_nazioni").val("");
      }
  });
  

• 如果后续有动态给某个select增删option选项的逻辑（比如选完国家动态加载对应省份列表），在修改完原生select的option之后，一定要调用对应Slim实例的.reload()方法，让组件重新读取最新的option列表，否则界面上展示的选项还是旧数据。
• 不要尝试用操作自定义DOM的方式强制改选中状态，很容易出现不同步的bug，优先用组件官方暴露的API操作是最稳定的方案。

内容的提问来源于stack exchange，提问作者Michele Della Mea