获取多个下拉菜单实例选中值的问题排查

你遇到的问题主要来自两个核心点：

1. 重复ID冲突：模板里的下拉菜单用了id="select"，克隆后12个下拉菜单都会带这个ID——但HTML规范要求ID必须唯一。这会导致$("#select")只能选中第一个元素，同时nodeForm.select会变成包含所有select的数组，直接调用theSelect.selectedIndex自然会触发数组未定义的错误。

2. 事件上下文丢失：原来的showData()函数没有明确指向触发change事件的那个select元素，当存在多个select时，代码无法确定要操作哪一个，逻辑自然会混乱。

下面是修复后的代码，我会在后面拆解关键修改点：

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    /* 隐藏模板项，避免页面显示多余的模板元素 */
    .template {
      display: none;
    }
  </style>
</head> 
<body> 
  <div class = "menu"> 
    <form name="nodeForm"> 
      <ul> 
        <li class="template">Node <span class="qnum">1</span>: 
          <!-- 去掉重复ID，改用class；修改onchange传递当前触发元素 -->
          <select class="node-select" onchange="showData(this)">
            <option value="" disabled selected>select a note for this node</option>
            <option value="1">"A"</option>
            <option value="2">"A# / B♭"</option>
            <option value="3">"B"</option>
            <option value="4">"C"</option>
            <option value="5">"C# / D♭"</option>
            <option value="6">"D"</option>
            <option value="7">"D# / E♭"</option>
            <option value="8">"E"</option>
            <option value="9">"F"</option>
            <option value="10">"F# / G♭"</option>
            <option value="11">"G"</option>
            <option value="12">"G# / A♭"</option>
          </select> 
        </li> 
      </ul> 
    </form> 
  </div> 
  <p id="firstP">&nbsp;</p> 

  <script> 
    // jQuery克隆生成12个节点下拉菜单
    $(function() {
      var $ul = $("ul"),
          $li = $ul.find("li.template");
      
      // 克隆11个（加上模板的1个，总共12个）
      for (let i=2; i <= 12; i++) {
        $li.clone()
          .removeClass('template') // 移除模板类，让克隆项正常显示
          .appendTo($ul)
          .find("span.qnum").text(i);
      }

      // 如果需要批量获取所有下拉菜单的初始值，可以这样遍历
      $(".node-select").each(function(index) {
        console.log(`Node ${index+1} 初始值:`, $(this).val());
      });
    }); 

    // 修改后的showData函数，接收当前触发事件的select元素
    function showData(selectElement) {
      var firstP = document.getElementById('firstP');
      // 获取当前操作的节点编号
      var nodeNumber = selectElement.closest('li').querySelector('.qnum').textContent;
      // 获取当前select的选中信息
      var selectedIndex = selectElement.selectedIndex;
      var selectedValue = selectElement.value;
      var selectedText = selectElement.options[selectedIndex].text;

      // 更新显示内容，增加节点编号让信息更清晰
      firstP.innerHTML = `Node ${nodeNumber}: 
        This option's index number is: ${selectedIndex} (Javascript index numbers start at 0)<br>
        Selected Value: ${selectedValue}<br>
        Selected Text: ${selectedText}`;
    }
  </script> 
</body> 
</html>

• 替换ID为Class：把select的id="select"改成class="node-select"，既符合HTML唯一ID的规范，又能通过class选择器批量操作所有下拉菜单。
• 事件传递当前元素：修改onchange="showData()"为onchange="showData(this)"，让函数直接拿到触发事件的那个select节点，彻底解决上下文混淆的问题。
• 隐藏模板并优化克隆逻辑：给.template添加display: none隐藏模板，克隆时移除这个类确保节点正常显示；同时用let代替var避免循环变量的作用域问题。
• 增强showData函数：现在可以显示当前操作的节点编号，以及选中的索引、值和文本，信息更直观。

如果需要一次性收集所有12个节点的选中值，可以添加这个函数（比如绑定到一个按钮的点击事件）：

function getAllNodeValues() {
  var allValues = [];
  $(".node-select").each(function() {
    allValues.push({
      nodeId: $(this).closest('li').find('.qnum').text(),
      value: $(this).val(),
      text: $(this).find('option:selected').text()
    });
  });
  console.log("所有节点选中值:", allValues);
  return allValues;
}

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