项目中需要用到的是多选下拉框，由于项目用的是bootstrap，我便找到了bootstrap-select这个可以提供多选下拉框的库。

因为这个项目是用ajax获取数据然后把数据放入select中的，而原生的select multiple又实在是太僵硬

1
2
3
4
5
6

<select multiple>
    <option>没错</option>
    <option>就是</option>
    <option>这么</option>
    <option>僵硬</option>
</select>

查了一下w3c

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

定义和用法
multiple 属性规定可同时选择多个选项。

在不同操作系统中，选择多个选项的差异：

对于 windows：按住 Ctrl 按钮来选择多个选项
对于 Mac：按住 command 按钮来选择多个选项
由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。

提示：可以把 multiple 属性与 size 属性配合使用，来定义可见选项的数目

僵硬的不行。感觉自己写的话，一方面自己能力不足吧，另一方面是应该会有一大堆的库，自己写感觉太浪费时间，所以自己就去网上随便搜了一下，就发现了Bootstrap-select这个库，看起来很符合要求！那就决定是它啦！

然后发现的一个问题是因为项目用到的数据是通过ajax来获取的，而且我们还用的是jquery拼接的形式，所以是html是<select ...></select>,js文件拼接是<option>...</option>,但是就是这样出现了问题，并没有显示出我们想要的效果，没有显示出有数据的下拉框。当时感觉比较奇怪，感觉是框架的问题，又重新试了几次，发现只有在html文件里写option标签才能正常显示下拉框效果，就比较郁闷。

接着之后就又去找另一个库，然后发现了Amaze这个前端框架，有多选，又好看，只不过如果要改，改的成本会很大，页面基本都得改。当时觉得为了这个多选，一方面是Bootstrap 3已经用烂了，不怎么好看，一方面也是为了多选，说换就换。然后基本把几个页面重构了。结果发现很累，而且出现了无法获取Amaze select选中的option的值，就比较烦，原本功能完好的页面被这么一折腾，基本功能都不好了。后来因为一些事有一段时间没理这个问题了。

好不容易有时间抽出空来，当时已经忘了之前做过什么了，就感觉Amaze这个解决不了，就又去找多选的下拉框架，这样又找回了Bootstrap-select这个库，然后用，至少能拯救基本功能，所以又放弃了重构到40%左右的Amaze框架，刚好那时候Bootstrap 4官方文档出来了，已经是正式版了，就换上了4，结果Bootstrap-select这个库官网的版本还没有支持Bootstrap 4，可是项目我又改了挺多的改成了4，这样改来改去不是问题啊。

于是我想起了之前某位高人跟我说解决问题的方法，如果遇到问题只是换框架，不去追究怎么解决，那始终是个sdk搬运工。

一方面感觉自己这样下去不是办法，另一方面是自己也并不想只做个搬运工，至少得是个高级搬运工吧:)

然后静下来，一个个问题去搜，基本也都有，比如因为Bootstrap 4正式版刚出来，select库还没有官网地上线支持，但是在他的github上已经有issue了，也提供了最新的支持版本。

接着，解决ajax的问题，个人当初觉得是因为数据发送在页面渲染之后，导致页面没有及时的把组件渲染出来，当时是搁置了一天左右，也懒得去找答案，后来随便一搜又搜到了该问题。附上原链接，然后又是多选框的选中option的值的获取问题，只要搜一搜就能找到了。

其实吧，这次碰到的问题都很简单，但是自己处理起来感觉极其xx，而且繁琐，最主要的是文档很重要，就比如Bootstrap-select文档明明就写有很多method

1
2
3
4
5

.selectpicker('render')

You can force a re-render of the bootstrap-select ui with the render method. This is useful if you programatically change any underlying values that affect the layout of the element.

$('.selectpicker').selectpicker('render');

1
2
3
4
5

.selectpicker('refresh')

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

$('.selectpicker').selectpicker('refresh');

反而自己舍近求远，弄的相当复杂，同时如果有github，github的issue也是一个非常重要的解决方法的途径。

本文就想记述一下自己解决问题时候的方法，问题有很多，方法也可以有很多，也可以有很快的方法，希望通过这次能提高一下自己解决问题的能力，不再是一个sdk搬运工:)