首个下拉选择更新后，如何同步刷新对应Div选项列表？

问题核心：第一个下拉框选择变化时，仅更新了第二个原生select的选项，但对应的自定义Div列表（.customSelectTwo）未同步更新——因为初始化时的customSelect仅执行一次，后续select内容变化后没有重新生成Div。

修改方案 #

在填充完第二个原生select的选项后，添加代码清空旧的自定义Div、重新生成新选项，并重新应用文本样式：

修改后的完整JS代码 #

var dms_1 = new Object();
dms_1['147724'] = new Object();
dms_1['147724']['IS.05'] = "International 1";
dms_1['212706'] = new Object();
dms_1['212706']['UK.01'] = "UK 1";
dms_1['212706']['UK.02'] = "UK 2";

function fill_delivery_methods_1(addSel) {
  var methSel = document.del_sel.delivery_method_1;
  methSel.options.length = 0;
  
  for (var address in dms_1) {
    if (address == addSel.options[addSel.selectedIndex].value) {
      for (var method in dms_1[address]) {
        methSel.options[methSel.options.length] = new Option(dms_1[address][method], method);
      }
    }
  }

  // 新增：同步刷新第二个自定义Div列表
  $('.customSelectTwo').empty(); // 清空旧选项Div
  customSelect("delivery_method_1", "customSelectTwo", 0); // 重新生成新Div
  // 对新生成的Div重新应用样式替换
  $('.customSelectTwo .selectOption').html(function() {
    return $(this).html().replace('Name:', '<span>Name:</span>');
  });
  $('.customSelectTwo .selectOption').html(function() {
    return $(this).html().replace('Address:', '<br/><span>Address:</span>');
  });
}

// 初始化生成自定义Div列表
customSelect("this_delivery_1", "customSelectOne", 1);
customSelect("delivery_method_1", "customSelectTwo", 0);

// 自定义Div的点击事件处理
$(document).on("click", ".selectOption", function(event) {
  $(this).parent("div:first").find('.selectOption').removeClass('checked');
  const getOptionID = $(this).data('optionid');
  $(this).toggleClass('checked');
  $(this).parent("div:first").prevAll('select:first').val(getOptionID).change();
});

$('.hideShowSelect').click(function() {
  $('select').toggle();
});

/*
  根据select生成自定义Div选项的工具函数
  @select : select元素的name属性
  @div : 承载自定义选项的Div类名
  @checked : 是否默认选中第一个选项（1是/0否）
*/
function customSelect(select, div, checked) {
  $('select[name="' + select + '"] option').each(function(index) {
    const checkFirstOption = (index === 0 && checked === 1 ? ' checked' : '');
    const optionVal = $(this).val();
    const optionLabel = $(this).text();
    $('.' + div).append('<div class="selectOption col-xs-12' + checkFirstOption + '" data-optionid="' + optionVal + '">' + optionLabel + '</div>');
  });
}
// 初始化时给所有自定义Div应用样式
$('.selectOption').html(function() {
  return $(this).html().replace('Name:', '<span>Name:</span>');
});
$('.selectOption').html(function() {
  return $(this).html().replace('Address:', '<br/><span>Address:</span>');
});

关键修改说明 #

1. 在fill_delivery_methods_1函数末尾，先清空旧的自定义Div内容，避免重复生成选项
2. 重新调用customSelect根据更新后的select生成新的自定义Div
3. 对新生成的Div重新执行文本样式替换，确保样式生效

修改后，选择英国地址时，第二个自定义Div列表会同步显示UK 1和UK 2两个选项，点击也能正常关联原生select的选中状态。

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