jQuery同名多字段问题：选择Line B时无控制台输出原因

核心问题：ID重复导致事件绑定失效 #

HTML里两个select的id都是mySelect，这违反了HTML规范——页面中ID必须唯一。浏览器通过#mySelect选择元素时，只会匹配到第一个（也就是Line A对应的select），所以你的change事件只绑定在了Line A的下拉框上，Line B的select根本没绑定到事件，自然不会输出日志。

修复步骤 #

1. 修正ID唯一问题
   给两个select设置不同的ID，同时添加共同类名方便统一处理：

   <!-- Line A对应的select -->
   <select id="mySelectA" name="mySelect" class="line-select">...</select>
   <!-- Line B对应的select -->
   <select id="mySelectB" name="mySelect" class="line-select">...</select>
   

2. 改用类选择器绑定事件
   放弃ID选择器，用类选择器给所有目标select绑定事件，同时可以判断仅处理显示状态的元素：

   $('.line-select').on('change', function() {
       // 手动操作下隐藏元素不会触发change，这个判断可省略，加了更严谨
       if ($(this).is(':visible')) {
           console.log($(this).val());
       }
   });
   

   要是元素是动态切换显示的，也可以用事件委托绑定到父元素，兼容性更好：

   // 假设所有行的父容器ID是lineWrap
   $('#lineWrap').on('change', '.line-select', function() {
       console.log($(this).val());
   });
   

3. 优化单选按钮切换逻辑
   确保切换单选时仅显示对应行，隐藏其他行：

   $('input[name="lineChoice"]').on('change', function() {
       // 先隐藏所有行
       $('.line-row').hide();
       // 显示选中项对应的行（假设行的ID是lineA-row、lineB-row，与单选value对应）
       $('#' + $(this).val() + '-row').show();
   });
   

额外提示 #

• 永远不要在页面重复使用同一个ID，这会引发选择器失效、样式冲突等各种隐性问题。
• 针对动态显示/隐藏的元素，事件委托（绑定到父元素）比直接绑定元素更稳妥，避免因元素初始状态导致的绑定失效。

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