jQuery代码无法响应所有select选项，仅触发单个选项问题求助

嘿，我一眼就发现问题所在了——你所有的<select>标签都用了同一个id sel1，但在HTML规范里，id是页面内唯一的标识，所以jQuery的$("#sel1")只会匹配到第一个带这个id的元素，这就是为啥点击按钮时只能获取第一个下拉框的值！

接下来咱们一步步修复：

1. 修复HTML结构：用class替代重复的id #

把所有select的id="sel1"去掉，换成统一的class，比如class="status-select"，这样我们就能通过类选择器选中所有下拉框了。修改后的HTML如下：

<div>
 <h4>Company name</h4>
 <select class="form-control status-select">
 <option></option>
 <option>Updated</option>
 <option>Validated</option>
 </select>
</div>
<div>
 <h4>Owner name</h4>
 <select class="form-control status-select">
 <option></option>
 <option>Updated</option>
 <option>Validated</option>
 </select>
</div>
<div>
 <h4>Address </h4>
 <select class="form-control status-select">
 <option></option>
 <option>Updated</option>
 <option>Validated</option>
 </select>
</div>
<div>
 <h4>Vertical</h4>
 <select class="form-control status-select">
 <option></option>
 <option>Updated</option>
 <option>Validated</option>
 </select>
</div>
<div class="form-group" style="margin:100px;">
 <label for="comment" style="float:left;">Comment:</label>
 <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>
 <textarea class="comment-box" rows="5" id="comment"></textarea>
</div>

2. 修改jQuery代码：遍历所有下拉框并生成评论 #

现在我们需要遍历每个.status-select元素，获取它们的选中状态，然后拼接成完整的评论内容。同时还要注意你原来代码里的大小写问题——选项文本是"Updated"（首字母大写），但判断条件是"updated"（小写），这会导致判断失效，我们可以用.toLowerCase()统一转小写来避免这个问题。修改后的JS代码：

$(document).ready(function(){
 $("#get_comment_button").on('click',function(){
   let commentContent = '';
   // 遍历所有状态选择框
   $(".status-select").each(function(index, element){
     // 获取当前下拉框对应的标题（比如"Company name"）
     let fieldName = $(this).closest('div').find('h4').text().trim();
     let optionText = $(element).find("option:selected").text().trim();
     
     if (optionText.toLowerCase() === "updated") {
       commentContent += `${fieldName}: Team Updated on \n`;
     } else if (optionText.toLowerCase() === "validated") {
       commentContent += `${fieldName}: Team Validated on \n`;
     }
     // 如果选中的是空选项，可以加个默认处理
     else if (optionText) {
       commentContent += `${fieldName}: ${optionText} \n`;
     }
   });
   // 把生成的内容放到评论框里
   $("#comment").val(commentContent);
 });
});

关键说明 #

• 类选择器替代id：用.status-select选中所有下拉框，避免id唯一性的限制
• 遍历处理每个元素：用.each()逐个处理每个下拉框，确保每个的状态都被获取
• 大小写兼容：通过.toLowerCase()把选中文本转成小写，避免大小写不匹配导致的判断错误
• 关联字段名称：用.closest('div').find('h4')获取每个下拉框对应的标题，让评论内容更清晰

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