我的天

当我把级联下来网页做出来了以后，发现原来核心数据并没有四层那么多，只有三层，所以我首先简化了一下那个东西。当我把核心数据转换，并套用进去以后，发现有些选项实在太多，有20个以上。这是非常之让人崩溃绝望的，如果你还不知情，你要在20多个东西里面找到你想要的这个东西，非常不容易。所以那一刻我就在想，为什么那个下拉菜单除了单选以外不能进行选项的搜索呢？实际上，有些网站的前端设计的确是具备这个功能的。在不同的系统下，实现这个功能的方式不一样，可以肯定的是在js下，在jQuery的加持之下，是可以实现这个功能的。据说方法也很简单，只要加一个js框架以及它对应的css就能做到。

理想很丰满，现实很骨感，经常会发生这种事情。当你看到那个例子的时候，当你尝试使用的时候觉得真挺不错，可以用在自己的东西上面，但是当js框架和css都引用过去以后发现跟自己的网站水土不服。有些东西直接就不见了，有些东西直接就变了个样，完全不受控。

传统的select不可以进行多选以及选项搜索，但是加强版的select就可以做到这个效果，那个经典的js框架叫select2。非常好理解，就是select的加强版。用方式也很简单，只要声明一下就可以了，但关键是无论是框架还是框架配套的css，如果你不想全部都要，只想选取其中有用的部分。这几乎是不可能的，起码我觉得以我的水平，我是不可能把那些东西筛选出来，所以只能全套引用。

之前已经说过，经典使用场景中，select下的option没办法直接加特效。因为那个东西不受css的直接控制，基本可以这么说，是一个失控的状态。所以要实现那个功能，大家的方案就是用一些li和span之类的东西从视觉上代替调声，但实际上当你选择的时候，你选择的内容依然是option的东西，但你看到的那些东西带有特效的玩意不是option本身。select2就是用了这种方法。select2可以多选，也可以对选项进行搜索，其强大之处当然不仅仅是美化一下那个不可控的option。

当我搜索可搜索的select的时候，我就遇到过select2，但因为它太强大，放上去又不太合适，所以我pass掉。取而代之地，我开始去研究一个相对来说貌似简单很多的国产版本，但是国产版本，相对于select2来说瑕疵也是比较明显的。因为select2已经经过了很迭代更新，经过很多人的共同开发，所以我遇到的问题之前的人几乎已经遇到过，所以当我搜索那些的时候基本能找到答案，而那个国产的版本，虽然看上去比较简单，但实际上用起来的时候会让你有无数问号，同时也找不到答案。

最终我用了最新版本的select2，然后成功地把自己的经典款级联下拉改成了可搜索版本。接下来，我要对那三个搜索框精准控制，比如第1层跟第2层选项很少，我没有必要提供搜索功能，还有就是在不同的手机浏览器之下，在搜索的时候会自动进行一些放大的操作，然后就会导致整个页面变得畸形，虽然通过手指的缩放可以改变，但是这种步骤会让人觉得很不爽。功能是实现了，但这种不愉快的操作必须的纠正过来。

你越想，就会遇到越多的问题，但这是好事。

网页里面的select和option，这两个东西估计是在一开始出现网页的时候就已经有。周三的时候我发现option的hover效果是无论如何设置不了的，你可以设置option的颜色或者背景，但是hover上去没有效果。你也可以通过css设置select的hover或者focus。该怎么设置这个option呢？最后发现是无解的，所以我又研究了一下其他人的替代方案，有些很酷的网站，他们用js写了个脚本，在option的上面又覆盖了一层由li和span组成的东西，所以你看到的特效实际上是有那些产生的，而不是option本身。那个效果非常的炫酷，但是你要引入大量的js，也要引入大量的css。漂亮是要有代价的，这是显然的，本来我已经想好，要模仿其中一个，结果却突然想到它的下拉可能就只有几个选项，但我的下拉有可能有十几二十个选项。我选定的那种款式，默认没有滚动条，所以这该怎么办呢？所以我只能放弃。

周四当我搜索的时候，我又发现了一个英文网站里面用了纯css实现了option的hover，之所以可以做到这样，是因为他在select那里使用了onfocus之类的事件。为什么onfocus之后就可以设置option呢？之前option做不到的东西，加入了那些事件以后就变得可以做到了。接下来你就可以在option里面设置你想要的东西。本来我觉得自己有救了，之所以说本来，是因为后来我又发现了一些很无语的现实。

做的这个静态网站，我觉得受众大多数是用手机打开的。虽然可能他们准备资料的时候是在电脑旁，但是要查询资料的时候，估计他们不会先打开个电脑。所以这就意味着这个网站的开发我得兼容手机和PC。select和option的展示方式，不同浏览器不一样，手机和电脑不一样，不同的手机品牌也不一样。非常有可能在PC上的效果已经设置得如我所愿，但实际上到了手机上还是自动套用了手机经典的款式，所以等于做了个寂寞，与其这么大费周章，还不如直接放弃治疗。同一个手机，不同浏览器出来效果不一样；再换一个平板，虽然内核都是Chrome， 但实际上又会有差别。我不知道那些人是如何做到兼容这有一切的，起码对我来说这实在太难了。所以我只能尽量做到在不同的设备上效果都过得去。所以在选择字体大小上应该用什么样的比例，我又研究了一番。如果完全就只是一个PC的网页，设置好我想要的也就可以了，大概差不多也就那些字体大小，但是手机上看到的东西我感觉比PC上看到的小很多，于是我不得不把字体放大，但是放得太大，PC上就像一个搞笑的存在。以前body的font-size我都是用绝对像素。这一次我不得不采用相对单位。PC上点击用的是鼠标，图标再小，你都可以准确按到，但手机上你用的是手指，所以那个按钮必定不能太小。这些矛盾的东西，当你不是真的碰上的时候，是不会想象得出来的。

最后，我感觉大概差不多就那样了，剩下的事情就只是等待最终的数据源。