如何在JavaScript中为下拉列表设置多个选中值

<!-- 添加multiple开启多选，可选添加size属性控制默认展示的选项行数 -->
<select id="select" multiple size="4">
  <option value="xxx">选项A</option>
  <option value="yyy">选项B</option>
  <!-- 其他选项 -->
</select>

步骤2：优化JS选中逻辑 #

推荐使用jQuery的prop()方法处理表单状态属性，比attr()更稳定，也可以用更简洁的批量赋值写法：

<script type="text/javascript">
    $(document).ready(()=>{
       const value1 = "<?php echo $name1; ?>";
       const value2 = "<?php echo $name2; ?>";

       // 写法1：逐个设置选中
       $('#select option[value="' + value1 + '"]').prop("selected", true);
       $('#select option[value="' + value2 + '"]').prop("selected", true);

       // 写法2：更易扩展的批量写法，后续要新增选中值直接往数组里加即可
       // const targetValues = [value1, value2];
       // $('#select').val(targetValues);
    });     
</script>

内容的提问来源于stack exchange，提问作者ahmadtam