如何从HTML <select>元素获取多值及用JS提取value1和value2到变量

嘿，我来帮你搞定这两个关于<select>元素的问题，都是前端开发里常见的场景哦：

1. 如何从HTML 元素中获取多个值？ # 默认情况下，<select>是单选的，要支持多选，你得先给它加上multiple属性，用户就能按住Ctrl（Windows）或Cmd（Mac）键来选择多个选项啦。 步骤1：修改HTML，添加multiple属性 # <select class="form-control" id="country" name="country" multiple> <option value="us">USA</option> <option value="ca">Canada</option> <option value="uk">UK</option> </select> 步骤2：用JavaScript获取选中的多个值 # 有两种常用方法，任选其一就行： 方法一：通过querySelectorAll选中所有被勾选的<option>，再遍历取值 const selectElement = document.getElementById('country'); const selectedValues = Array.from(selectElement.querySelectorAll('option:checked')) .map(option => option.value); console.log(selectedValues); // 输出所有选中值组成的数组，比如["us", "ca"] 方法二：利用<select>自带的selectedOptions属性，直接获取选中的选项集合 const selectElement = document.getElementById('country'); const selectedValues = Array.from(selectElement.selectedOptions) .map(option => option.value); console.log(selectedValues); 2. 如何使用JavaScript将的value1和value2分别存入两个变量？ # 首先得提一句：你给出的HTML代码有点小问题——<option value="value1" "value2">是无效的HTML语法，HTML元素的属性必须是属性名="值"的格式，不能直接写两个无属性名的字符串。 正确的做法是用**自定义数据属性（data-*）**来存储第二个值，比如data-second-value，这样既符合规范，又能轻松获取到额外的数据。 步骤1：修正后的HTML代码 # <select class="form-control" id="country" name="country"> <option value="value1" data-second-value="value2">Select Item</option> </select> 步骤2：用JavaScript获取两个值并存入变量 # // 先拿到select元素 const selectElement = document.getElementById('country'); // 获取当前选中的option（这里只有一个选项，直接取第一个就行） const selectedOption = selectElement.selectedOptions[0]; // 把两个值分别存入变量 const value1 = selectedOption.value; const value2 = selectedOption.dataset.secondValue; console.log(value1); // 输出 "value1" console.log(value2); // 输出 "value2" 如果需要在用户切换选项时自动获取值，可以加个change事件监听： selectElement.addEventListener('change', function() { const selectedOption = this.selectedOptions[0]; const value1 = selectedOption.value; const value2 = selectedOption.dataset.secondValue; // 这里可以写你需要的后续逻辑 console.log('选中的两个值：', value1, value2); }); 内容的提问来源于stack exchange，提问作者Alshoja