JavaScript/jQuery中多选下拉列表的批量赋值与选中技巧

记得上次帮同事调试表单提交问题时，多选下拉框中选择的值不匹配。
我当时使用的是 jQuery，但显然我忘记添加多个属性。
我想了很久，然后发现使用val方法来传递数组是非常容易的。

具体操作是这样的。
我在办公室的 MacBook 上输入代码并使用 Sublime Text。
选中select框，使用console.log打印其val，发现是一个空数组。
然后直接使用$(multi-select).val(["apple", "orange"])，刷新页面再看，会自动勾选“apple”和“orange”。

但是，我注意到一个问题。
如果后端返回的数据是["Apple", "orange"]，那么直接使用val(["apple", "orange"])会因为大小写不匹配而出现问题。
然后我想我可以使用.map(item => item.toLowerCase())将所有值转换为小写然后提交。

突然想到，如果不用jQuery怎么办？如何使用原生JS实现呢？它可能看起来像这样： const select = document.querySelector("multi-select"); Array.from(select.options).forEach(option => { option.selected = ["apple", "orange"].includes(option.value) });嗯，它肯定比 jQuery 复杂得多。

这个方法最神奇的地方在于，如果数组中有一个“banana”，但选项中没有这个值，它实际上什么也不做。
这让我想起了我之前做的表单验证。
用户选择了一些根本不存在的选项，但验证实际上通过了。
后来，添加了一项检查以确保数组中的每个值都存在于选择中。

等一下，还有一件事，如果复选框有默认值，例如“apple”已经被选中，然后使用 val([“apple”, “orange”])，“apple”将再次被选中，而不是保持原样。
这有点烦人，也许需要添加一些逻辑。

该方法最常用于哪些场景？也许当用户在登录期间选择多个角色时，或者在购物车中选择规格时。
上次重建后端管理系统时，我就用这个方法将之前选定设置的所有代码都一一替换掉了。
结果，性能得到改善。

不过，现在前端框架都采用了v-model，这种手写val的使用似乎比较少见了。
我想知道以后会不会被删除呢？

JQuery MiNiUI 多选多列下拉列表如何动态赋值。

哎呀兄弟，你的代码似乎处于开发的前端。
我以前写过类似的东西，那次我确实遇到了坑。
记得有一次，我写一个网站，使用了miniUI库。
那是2 01 6 年，工作在杭州开始。
痛苦很大。

当时我写了一个下拉菜单，mini.get("tsyh")来获取它，然后我想设置URL。
结果是 mini.get("tsyh").setUrl(xxUrl);。
当时我直接先输入ctx + "/gg/getComboBoxJson?dmlb=检查指定数据字段"，但是页面挂了，页面上什么也没有显示，就像白屏一样。

等了很久才发现Home后面的参数有问题。
当时没注意，但是模块后面紧接着就出现了一个问号。
这就是为什么浏览器认为Home结束了，根本不重视后续模块。
我改成了ctx+"/gg/getComboBoxJson?dmlb=检查具体数据字段"+'&'+其他参数，问题就解决了。

后来我还发现有时候后端表单返回的数据不正确，也会导致页面无法显示。
所以每次写代码的时候我都会在浏览器中打开看看效果，如果发现什么问题，我会把问题贴出来。

我敢说前端开发确实是细节决定成败。
符号或空间会影响结果。
但现在前端技术适应得太快了，我也在不断学习新东西。
哎，说起来，你最近有遇到前端问题吗？我们可以互相交流。

JQuery介绍，包括load(),get(),post()以及赋值等方法（包括案例分析）

JQuery .load()：动态加载外部内容，案例：$.load('div01 ', 'userservlet')，完成部分页面。
JQuery .get()：异步请求，案例：$.get('/data', function(data) {}，处理数据。
JQuery .post()：异步发送数据，例如：$.post('/submit', {data}, function(response) {}，提交表单。
JQuery .val()：读取或值，大小写：$('input')。
陷阱是这样的：直接在dom上工作而不是使用JQuery方法，性能很差并且代码冗余。
实用提醒：掌握JQuery核心方法，避免手动操作dom。