Dzwebs.Net

撰写电脑技术杂文十余年

bootstrap中的selectpicker动态设置默认值的坑与解决办法

Admin | 2022-1-18 16:40:00 | 被阅次数 | 1140

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  在HTML5使用bootstrap中的selectpicker设置select下拉框,不仅效果美观,同时,也很优雅,总之,相当灵活与方便。

  但是,该selectpickerd的坑也不少呀,下面给大家介绍一下动态设置selectpicker默认值遇到的各种坑与解决办法。

  比如,存在这么一个select

  <select id="难易程度" class="selectpicker" data-style="btn-primary" data-width="180px">
  <option value="请选择">请选择</option>
  <option value="一般">一般</option>
  <option value="中等">中等</option>
  <option value="较难">较难</option>
  <option value="很难">很难</option>
  </select>

  一、使用代码动态修改默认值遇到的坑

  当我使用如下代码时:

  temp='较难';
  $("#难易程度 option[value='"+$.trim(temp)+"']").attr("selected","selected");
  $("#难易程度").selectpicker('refresh');

  如上代码的作用就是要将“较难”设置为默认选中的值。

  上面会出什么情况呢?可能连你都想不到。遇到的问题是:第一次执行上述代码是可以正确选择默认值的。但是,第二次执行上述代码,却无法正确的选择默认值。

  还有,在运行上述代码之前,如果鼠标点击并选择过下拉框的选项,代码运行时根本无法正确的选择默认值。非常奇怪。你可别说其它的阿,因为各种方法我都使用了。始终无法解决问题。让我困惑了一段时间。

  二、解决的办法

  解决的办法其实也非常简单。使用如下代码即可。

  temp='较难';
  $('#难易程度').val($.trim(temp));
  $("#难易程度").selectpicker('refresh');

  就只是改了第二行代码,然后就发现,问题解决了。


  看看美观的效果图吧。


网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231