Ajax响应值无法在jQuery的Select选项中正确绑定的问题

问题核心原因 #

你的代码存在两个关键问题：

1. 数据遍历逻辑错误：AJAX返回的数组中第一个元素是酒店基本信息（不含roomtype字段），但你用$.each遍历所有元素，导致：
   • 下拉框会插入value="undefined"的无效选项
   • 酒店名称会被后续无hotel_name字段的元素覆盖为空
2. 未处理重复添加问题：多次点击按钮会重复插入房型选项，导致下拉框数据混乱

修正后的代码 #

jQuery代码

$(document).off('click', '.hotel_add').on('click', '.hotel_add', function () {
    var id = $(this).attr('id');
    var pos = $(this).closest('.hotel-result').data('pos-id');
    
    // 用getJSON自动解析响应，避免手动JSON.parse可能的错误
    $.getJSON("<?php echo base_url('hotel/hotelDataGet') ?>/" + id + '/' + pos, function (data) {
        if (data.length > 0) {
            // 单独设置酒店名称，仅取第一个数组元素
            $('#defaultModalLabel').html(data[0].hotel_name);
            
            // 清空下拉框原有非默认选项，防止重复添加
            $('.apple').find('option:not(:first)').remove();
            
            // 从第二个元素开始遍历，仅处理房型数据
            for (var i = 1; i < data.length; i++) {
                var roomType = data[i].roomtype;
                $('.apple').append('<option value="' + roomType + '">' + roomType + '</option>');
            }
        }
        
        $("#largeModal").modal();
    });
});

额外排查点（针对静态值也无效的情况） #

如果手动设置静态内容（如$('#defaultModalLabel').html('测试')）也无法显示，尝试：

• 把DOM操作移到模态框显示完成的回调中，确保元素已完全渲染：

  $("#largeModal").modal();
  $("#largeModal").on('shown.bs.modal', function () {
      $('#defaultModalLabel').html(data[0].hotel_name);
      // 下拉框更新逻辑也可移至此
  });
  

• 检查页面中是否存在其他JS代码修改了.modal-title1或.apple元素的内容

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