我的天

当我把级联下来网页做出来了以后，发现原来核心数据并没有四层那么多，只有三层，所以我首先简化了一下那个东西。当我把核心数据转换，并套用进去以后，发现有些选项实在太多，有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层选项很少，我没有必要提供搜索功能，还有就是在不同的手机浏览器之下，在搜索的时候会自动进行一些放大的操作，然后就会导致整个页面变得畸形，虽然通过手指的缩放可以改变，但是这种步骤会让人觉得很不爽。功能是实现了，但这种不愉快的操作必须的纠正过来。

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

花了大概两天的时间，终于做出了我想要的那种级联分类下拉的效果，但实际上我的判断是根据上一层筛选的，所以如果上上一层不一样以我现在的判断结构，没办法分辨出来的。如果要把这些都分辨得清楚，那么json的结构里就得把每一条记录所在层都写清楚。如果那是1层，那么234可以留空，但如果那是4层，那么1234都得有。我的json文件现在结构非常简单，总体来说是一个数组，每个对象只有三个部分，一个是name，一个是class，一个是content。name是这个对象的名字，class是它所在的层，content分为两部分，如果不是最后一层，那么content就是下一层的name的数组，如果那是最后一层，那么就是它所包含的所有信息。

第1层比较简单，就是把属于第1层的数据添加到第1个选框里。第2层是我纠结得最久的，因为搞不定这个后面的也搞不定。一开始我的计划是首先判断第1层是有数的，然后获取第1层对应的content。然后开始数组的历遍，把名字跟content里的一致且层数是2的name选出来，然后把它们逐个添加到第2层的选框里。第2层开始，这个操作是第1层的选项发生了变动后清空第2层，然后初始化选项框。第3层和第2层做的事情是一样的，无非就是2变成3，然后就是清空的时候，如果到达了第3层，第2层清空的时候，就得把第2层跟第3层都清空了。我的设定是到第4层，第4场就是结果，所以当第4层被确定下来以后，第4层的content就需要展示具体内容。同理，如果我1234层都选好了，然后我又变动了第1层，那么就得把234层以及最后的结果全部清空。这些操作都是很规律的，我感觉可以通过循环或者递归之类把这说清楚，就不需要一次又一次重复这种事情。准确来说，我感觉用递归更合理一些，但是因为我的递归学得实在很糟糕。学python时候，递归那一章从来都是让我瑟瑟发抖的，尤其是要我画雪花图案的时候，简直毛骨悚然。有了那些清空和初始化的操作以后，我就彻底避免了百度AI自动生成的那些bug。现在我的这个方案的确挺傻的，但我觉得可以通过递归的改写让它没那么傻，这个方案之所以可行，其中一个很重要的地方在于起码以我手头上的资源以及我的技术，我可以生成出对应的文件。虽然可能会有点麻烦，但起码可以实现。首次生成会让你有点望洋兴叹，但持续更新的难度不大。

核心部分基本解决以后，我要开始进行UI美化，进而发现，原来CSS进化了那么多年，select下面的option依然没有可以轻易被控制的方案。这么一个死胡同，居然被我撞上了。