使用Dropzone.js提交表单时无法获取动态加载的city_id值

看起来你遇到的问题是动态渲染的城市下拉框（搭配Select2插件）在Dropzone提交时无法传递选中值，出现undefined的情况。我来帮你分析几个可能的原因和对应的解决方案：

可能原因1：Select2未正确同步到原生select元素 #

当你通过AJAX加载城市选项后，若没有重新初始化Select2插件，Select2的选中状态不会同步到原生的<select id="city">元素上，导致后续拿不到正确值。

解决方案：
在获取城市数据并渲染到下拉框的AJAX回调函数里，重新初始化Select2：

// 示例：绑定国家下拉框的change事件
$('#country').on('change', function() {
  var countryId = $(this).val();
  if (countryId != 0) {
    $.ajax({
      url: '你的城市数据接口地址',
      type: 'GET',
      data: {country_id: countryId},
      success: function(data) {
        // 清空原有城市选项
        $('#city').empty();
        // 渲染新的城市选项
        $.each(data, function(index, city) {
          $('#city').append('<option value="' + city.id + '">' + city.name + '</option>');
        });
        // 重新初始化Select2，确保选中状态同步到原生select
        $('#city').select2();
      }
    });
  } else {
    // 未选择国家时清空城市下拉框并重置Select2
    $('#city').empty().select2();
  }
});

可能原因2：常规遍历取值未适配Select2特性 #

Select2的DOM结构可能导致普通的$(this).val()无法正确获取选中值，你可以单独针对城市下拉框获取值，避免依赖遍历的不确定性。

修改Dropzone的sendingmultiple事件代码：

myDropzone.on('sendingmultiple', function (file, xhr, formData) {
  // 遍历常规表单元素
  $("form input, form select").each(function () {
    formData.append($(this).attr("name"), $(this).val());
  });
  // 单独处理城市下拉框，用Select2专属方法获取选中值
  var cityId = $('#city').select2('val');
  if (cityId) {
    formData.set('city_id', cityId); // 覆盖之前可能获取到的undefined值
  }
  formData.append('name', $('#summernote').summernote('code'));
});

可能原因3：城市下拉框不在Dropzone绑定的form范围内 #

检查你的DOM结构，确保<select id="city" name="city_id">被包裹在Dropzone对应的<form>标签内。如果它在form外面，$("form input, form select")的遍历就不会包含它，自然拿不到值。

验证方法：
打开浏览器开发者工具，查看city下拉框的父元素层级，确认它在Dropzone绑定的form标签内部。如果不在，调整DOM结构将其移入form即可。

额外调试技巧 #

你可以在sendingmultiple事件中添加调试代码，快速定位问题：

console.log('原生select值:', $('#city').val(), 'Select2选中值:', $('#city').select2('val'));

通过控制台输出可以快速判断是值未同步、遍历未覆盖，还是元素不在form范围内。

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