jQuery动态创建嵌套Select的ID与选中值获取问题

你遇到的问题核心是选择器使用错误，导致无法定位到矩形内部的Select元素。咱们来一步步梳理并修复：

问题分析 #

你提交代码里的$(this.id).find("select")写法有问题：this.id是字符串（比如box1），直接传入jQuery的话，它会把这个字符串当成标签名去查找，而不是ID选择器。所以你得到的是空的jQuery对象，自然attr('id')会返回undefined。

修复后的提交代码 #

直接用$(this)指代当前遍历到的矩形元素，然后通过.find("select")精准定位它内部的下拉框：

$('#SubmitFields').on('click',function(){
 var AllFields = [];
 $(".draggableAddedFields").each(function() {
 var obj = {}; // 用对象字面量更简洁
 obj.BoxID = this.id;
 // 获取当前矩形内的Select元素
 var $targetSelect = $(this).find("select");
 // 存入Select的ID和选中值
 obj.SelectID = $targetSelect.attr('id');
 obj.SelectedValue = $targetSelect.val();
 AllFields.push(obj);
 // 打印验证结果
 console.log("当前矩形信息：", obj);
 });
 // 这里可以继续处理AllFields数组，比如提交到后端
})

额外优化建议（可选） #

你创建Select的代码可以稍微优化一下，确保Option的value属性正确设置（如果BusinessStep里有value字段的话），这样选中值的获取会更规范：

// 创建Select时用属性对象批量设置
var combo = $("<select></select>").attr({
  "id": SelectID,
  "name": SelectID
});
// 循环添加Option时同时设置text和value
$.each(BusinessStep, function (i, el) {
  combo.append($("<option>").text(el.text).val(el.value));
});

这样修改后，你就能正常获取每个矩形对应的Select的ID和选中值了。

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