场景阐述
表单中的下拉列表多选，提交时，保存多选的顺序； 回显时，以保存的顺序依次回显；
场景截图
思考
- 遐想了一下如何实现
- 提交到接口的数据[1,20,4,5,2],接口返回的数据[1,20,4,5,2]【这不废话么】;
- 上一步细想，反显数据对应的枚举顺序也是[1,20,4,5,2]
- 没有进入思考场景？
- 再来梳理一下
select下拉枚举
[
{name:'张三', value: 3},
{name:'李四', value: 4},
{name:'王五', value: 5},
{name:'猪八戒', value: 86},
]
- 提交数据：[86,4]
- 通过提交的下标集合[86,4]和下拉枚举，实现多选回显：'猪八戒','李四'
- 咋实现呢？先简单捋一捋
步骤：
- 构建list枚举数据
- 点击多选，保存多选下标值
- 根据多选下标值，匹配枚举，回显出正确的多选枚举描述
- 注意先后顺序
正文部分
完善上述步骤：
- 构建枚举数据list,定义数据属性名称【name,value】,值类型【string,number】
- select标签属性验证，面向MDN查询属性适配
select的首个option标签是会回显到选中数据中的，所以首个option可以隐藏不展示，或者直接命名为'全部'或者'请选择'，效果如图：
- 点击多选，保存多选下标值
使用DOM原生事件addEventListener，元素属性selectedIndex结合来实现
- 根据多选下标值，匹配枚举，回显出正确的多选枚举描述
最简单的for循环即可实现，循环对象为选中下标值集合
成品demo
遐想与碎碎念
无论技术多厉害的大佬，终究是要退休的
写文章这件事在当前阶段能够让自己心情平复，并不断向前就足矣，无需取悦谁，嘲讽谁~
尝试去接触不同的人，连接触都没有，又如何判断他人的好与坏呢~
最后
不足之处请指出，缺陷我改，其他我看着改~😏
