我的天

之前说到，级联下拉菜单的select2插件当它觉得下面的空间不足的时候，就会把下拉菜单变成上拉菜单。我不知道设计者到底是怎么想的，我也不知道为什么使用的人为什么不觉得这个操作不太对，可能是我比较古板吧。我没有限定那个网页的最大高度，所以实际上这个网页的高度是无限的，不存在空间不足的问题。以我的水平也没办法去了解这个select2插件到底是如何判断空间到底是不是不足。

一开始我用的是mini版本，就是所有代码都挤在一起，之前我觉得标准版本跟mini版的区别在于mini版里面没有了注释、回车、缩进，仅此而已，但是当我在mini版里面找不到网友提到的某个东西的时候，我就怀疑是不是除了上面我提到的以外，min版跟标准版还有其它的区别。要在min版密集的字符里面找到某些东西非常的困难，哪怕你已经不是用肉眼去找，而是使用搜索功能，所以我又下载了一个标准版，结果发现原来二者真的有区别，区别还不少。在搜索标准版的时候，我找到了判断是否空间不足需要转换上拉下拉的各种操作，但是在mini版里面完全没说清楚，而且所有的变量都非常简洁，只有一个字母，你根本猜不出那到底是什么。

所以我首先是在标准版里进行我想要的修改，结果发现可以了，但是我却没办法在mini版里找到完全一致对应的部分。标准版跟mini版体积差了一倍，但实际上标准版也不过是150KB而已，很小。我尝试过直接把标准版拿去压缩，结果出来的东西好像vscode不太承认，虽然在mini版里还没有找到修改的方法，但起码我有标准版的修改方案。

除了下拉菜单以外，还有第三层选项搜索栏的自动对焦的问题。只要打开第三层菜单，光标就会自动的对焦到搜索栏，这就意味着手机的虚拟键盘会马上弹出。这会大大降低了手机屏幕的高度。如果虚拟键盘不弹出，你直接可以从下拉菜单里面选择的那些东西你不得不麻烦地把虚拟键盘最小化掉。这个操作跟聚焦搜索框会扩大屏幕字体一样，让人烦恼。所以我要做的是当我点击第三层菜单的时候，下拉列表有搜索框，但是光标不聚焦在那里，这就意味着，如果第三层菜单只有几个选项，用户可以直接点击选项，不会有虚拟键盘的弹出。在我们现在整理的数据当中，第三层菜单绝大多数选项都只有几个，可以直接一目了然展示完毕，极少需要调用到滚动下拉菜单。之所以要在第三级菜单里面做一个搜索框，是因为有那么极少数的选项数量很多的，会在10个以上，会让那个地方出现滚动的下拉菜单。因为选项很多，如果可以有对选项进行搜索的功能，显然会方便很多，所以我的目标是第三层选项有搜索框，但弹出的时候搜索框不聚焦，但你可以手动点击搜索框，然后在里面输入获取你想要的结果。这个东西说起来好像挺简单，但实际上要真的做到，还真不只是输入框自动聚焦的问题。后来，我在毫无办法之下，又去研究select2标准版的时候才发现，让我无论如何设置输入框都不能解决的原因是让输入框那么顽固的东西不在输入框本身那里。最后我替换了一些写着focus的东西，终于，第三层带有输入框的下拉菜单在打开的时候焦点不再自动固定在输入框那里了。

我也不想修改select2脚本本身，我尝试过很多方法实现我想要的效果，但最终宣告失败，所以我也就只能手动修改标准版。套件使用起来的确很舒服，但未必跟你的项目完全匹配，当你要做微调的时候，可能会碰壁很多次才最终能实现你的效果。

说了两天的Power Query方案不完美，大概就那些了。今天来说一下级联下拉菜单网站的不完美。

就功能来说，实际上都已经能实现了，但关键是有些部分好像，我无论如何控制不了，就电脑的展示效果来说，没什么好纠结的，但是手机的展示效果，却让人觉得好像总差那么一点点。

首先让我烦恼是在不同浏览器之下，搜索输入框会自动对焦。在小米自带的浏览器之下，不知道为什么那个下拉的选择框会变窄。firefox手机浏览器之下，整个页面变大，无论我怎么调节网页的字体大小都没办法阻止 firefox手机浏览器的这个自动变大。最后发现，原来这是手机浏览器的臭毛病，他们觉得输入时字体太小，你看不清，所以要自动变大，但自动变大会让网页的展示效果发生扭曲，变大了以后，当我不再聚焦在那个输入框，不会自动把网页缩小，这就让人很头痛。小米自带浏览器之下，当你的焦点不在那个搜索框的时候，下拉菜单的宽度又正常了。虽然这两个测试的浏览器实际上都不会影响最终的结果，你要查找的东西最终还是能看到，但关键是非常影响用户的使用体验。如果是小米自带的浏览器，感觉虽然丑一些，但还是能够做到，但如果是遇到firefox手机浏览器，你必须用双指把网页缩小，这就让人觉得很麻烦，而且缩小了以后，当我再次点击搜索框，还是会变大，简直可以把这个东西称之为恶心。

在我发现这个是手机浏览器的臭毛病以后，我就直接在meta那里加入了禁止缩放的命令。搜索框聚焦会让网页放大缩小的问题彻底解决了，但这里只能说在安卓手机之下彻底解决了，至于苹果会不会有这种臭毛病，不知道。因为我手边没有可以用来测试的苹果设备。根据单位会计的反映，使用苹果手机的人比例不算太多。虽然我不知道她说的这个比例是怎么算出来的。因为单位的人用苹果手机的比例跟经常报销的人用苹果手机的比例可能是两个完全不一样的数字。但也可以换个角度考虑，那些用苹果手机的人如果手机体验感真的很差，那么就请他们在电脑上完成这个查询的步骤。毕竟需要经常报销的人通常不可能长期不接触办公室的电脑。

解决网页放大缩小的问题后，另外一个烦恼又涌出来了，理论上那是一个下拉菜单，但实际上不知道为什么，有时手机会弹出一个上拉菜单。如果上拉菜单完全没有问题也可以说得过去，关键是上拉菜单有时会出现一些格式上的异常，为什么明明是下拉菜单就变成了上拉菜单呢？据说这是select2插件的一个自动判断，当它觉得下面空间不足的时候，就会采用上拉菜单。这种情况通常发生在我要下拉一个菜单，那个菜单刚好是有搜索功能的，当那个菜单打开以后，手机会自动弹出输入法，所以这就意味着手机屏幕的高度突然间没有了1/3或以上，于是不知道为什么，网页就判断下面的空间不足，把那个东西变成上拉。有些时候，你明明知道下面的空间足够，但因为之前几回都是上拉，所以这一次有空间，也不下拉，要展示为上拉。我个人觉得挺反人类。电脑上没有发生过这种问题，但在手机浏览器上，却说不准什么时候会出现这种状况。理论上我要做的就是强制把菜单限定为只能下拉，但实际上好像插件又没有一个明确的控制方法让我轻易做到这个。

目标是明确的，道路是曲折的。