select2中文选项通过拼音或者首字母快速定位选项

今天药忘吃喽~ 2022-05-22 01:15 199阅读 0赞

使用SELECT2的时候，想通过拼音或者首字母检索下拉的选项，但是又没有通过AJAX技术等去实现  
这时候可以试试用这种伪方法〜

这种方法的好处就是快，方便使用

默认选择2如图：

![Center][]

代码：<option>中的值是由后台拼接生成

\[html\]   [查看纯][Link 1] [文本][Link 1]

1.  **<** **div** **>**  
2.  **<** **select** name = “test” id = “test” **>**    
3.      **<** **option** value = “1” **>** 王者荣耀| wangzherongyao | wzry **</** **option** **>**   
4.      **<** **option** value = “2” **>** 部落冲突| buluochongtu | blct **</** **option** **>**   
5.      **<** **option** value = “3” **>** 枪战王者| qiangzhanwangzhe | qzwz **</** **option** **>**   
6.      **<** **option** value = “4” **>** 永恒纪元| yonghengjiyuan | yhjy **</** **option** **>**   
7.      **<** **option** value = “5” **>** 英魂之刃| yinghunzhiren | yhzr **</** **option** **>**   
8.      **<** **option** value = “6” **>** 皇室战争| huangshizhanzheng | hszz **</** **option** **>**   
9.      **<** **option** value = “7” **>** 一起来飞车| yiqilaifeiche | yqlfc **</** **option** **>**   
10.     **<** **option** value = “8” **>** 海岛奇兵| haidaoqibing | hdqb **</** **option** **>**   
11.     **<** **option** value = “9” **>** 阴阳师| yinyangshi | yys **</** **option** **>**   
12.     **<** **option** value = “10” **>** 热血江湖| rexuejianghu | rxjh **</** **option** **>**   
13. **</** **select** **>**  
14. **</** **div** **>**  
15. **<** **script** **>**  
16.     $（ '＃测试'）。选择2（\{  
17.         宽度：150，  
18.         allowClear：true，  
19.         formatResult：function（item）\{  
20.             var  str  =  item .text;  
21.             var  idx  =  str .indexOf（'|'）;  
22.             return str.substring（0，idx）;  
23.         \}，  
24.         formatSelection：function（item）\{  
25.             var  str  =  item .text;  
26.             var  idx  =  str .indexOf（'|'）;  
27.             return str.substring（0，idx）;  
28.         \}，  
29.         占位符：' - 请选择 - '  
30.     \}）;  
31. **</** **script** **>**

效果图：

![Center 1][]

![Center 2][]

![Center 3][]

![Center 4][]

转自：https ：//blog.csdn.net/u012906135/article/details/70568932

补充：后台拼接name+拼音

![70][]

前台接收：提交时采用赋值另一个属性来提交值

![70 1][]

提交值：

![70 2][]

[Center]: /images/20220522/58e18afbf9bd41348f1f1ad381f89ebf.png
[Link 1]: https://blog.csdn.net/u012906135/article/details/70568932#
[Center 1]: /images/20220522/181bd1b3e3514631812cafad07cb2ceb.png
[Center 2]: /images/20220522/ca1ac22932614ff4889de61a831e3674.png
[Center 3]: /images/20220522/5a3d948a1be34fff92ee12205d95bb24.png
[Center 4]: /images/20220522/99f93d23cc2f453e9bd13a92d6e763eb.png
[70]: /images/20220522/a8aceaedd3e14ea4837698c1e563b0b2.png
[70 1]: /images/20220522/7e497aab86d54ed58de37d7c15d59678.png
[70 2]: /images/20220522/c4836e6908334a8ab78e1bc4acc27944.png