多选项选择框触发模态框获取值异常问题求助

问题根源 #

• HTML中id属性必须唯一，你给两行的select都设置了id="vulselect"，导致document.getElementById("vulselect")永远只会获取到第一行的select元素，所以第二行的选择操作无法拿到正确值。
• jQuery代码里没有利用当前触发事件的元素，反而通过重复id去查找，进一步加剧了问题。

修复方案 #

1. 修改HTML：移除重复的id，保留class即可 #

把两行select的id="vulselect"删掉，因为你已经用form-select类来绑定事件了，不需要重复id：

<tbody>
          
          <tr>
            <td class="client">client001</td>
            <td class="User">user001</td>
            <td class="Vulnerabilites">
              <select class="form-select" size="4">
                
                <option value="2705" >Security Vulnerability CVE-2018-1285 for log4net</option>
                
                <option value="73562" >Security Vulnerability CVE-2022-39427 in VirtualBox</option>
                
              </select>
            </td>
          </tr>
          
          <tr>
            <td class="client">client002</td>
            <td class="User">user002</td>
            <td class="Vulnerabilites">
              <select class="form-select" size="4">
                
                <option value="68069" >Security Vulnerability CVE-2021-34803 for TeamViewer</option>
                
                <option value="74465" >Security Vulnerability CVE-2023-21899 in VirtualBox</option>
                
              </select>
            </td>
          </tr>
          
        </tbody>

2. 修改jQuery代码：使用当前触发事件的元素来获取值 #

利用$(this)指代当前触发change事件的select，不需要再通过id查找：

<script>
$(function () {
    $(".form-select").change(function () {
      // 获取当前select的选中值
      var value = $(this).val();
      alert(value);
      $('#vulmodal').modal("show");
      
      // 取消当前select的所有选中状态
      $(this).find('option').prop('selected', false);
    });
});
</script>    

补充说明 #

• 用$(this).val()直接获取当前select的选中值，比原生DOM方法更简洁，也避免了id重复的问题。
• 取消选中状态时，用$(this).find('option')定位到当前select下的所有选项，再统一设置selected为false，逻辑更准确。

内容的提问来源于stack exchange，提问作者jonat-han