niceCountryInput下拉外同步展示选中国家国旗的实现方案咨询

1. 新增额外国旗展示容器 #

在你需要展示额外国旗的位置插入容器，示例是放在原有页面左侧的空白区域，你也可以根据需求调整位置：

<!-- 原有col-4区域 -->
<div class="col-4">
  <div style="background-color: #fff; width: 160px; height: 50px;margin-top: 0px; padding: 4px; border-radius: 6px;font-size: 12px;" data-showflags="true" class="">
    <!-- 新增的额外国旗展示容器 -->
    <div style="display: flex;align-items: center;gap: 8px;height: 100%;padding: 0 8px;">
      <span>选中国旗：</span>
      <img id="extra-selected-flag" class="niceCountryInputMenuCountryFlag" alt="选中国家国旗">
    </div>
  </div>
</div>

2. 修改选中回调实现国旗同步 #

利用插件自带的onChangeCallback选中触发回调，同步更新额外展示的国旗，推荐以下两种实现：

方案一：复用插件内已渲染的国旗资源（兼容性最高） #

直接读取下拉组件内已生成的国旗地址，无需关注资源路径规则：

function onChangeCallback(ctr) {
  console.log("The country was changed: " + ctr);
  // 读取下拉组件内当前选中的国旗资源地址
  const flagSrc = $('.niceCountryInputMenuDefaultText .niceCountryInputMenuCountryFlag').attr('src');
  if(flagSrc) {
    $('#extra-selected-flag').attr('src', flagSrc);
  }
}

方案二：通过国家代码自定义国旗资源（灵活度更高） #

如果需要自定义国旗尺寸，可直接用回调返回的国家二字码拼接资源地址：

function onChangeCallback(ctr) {
  console.log("The country was changed: " + ctr);
  // w23对应23px宽度，可自行调整为w40/w60等规格修改国旗尺寸
  const flagSrc = `https://flagcdn.com/w23/${ctr.toLowerCase()}.png`;
  $('#extra-selected-flag').attr('src', flagSrc);
}

3. 补充初始化逻辑 #

页面首次加载时自动展示默认选中的安道尔国旗：

$(document).ready(function() {
  $(".niceCountryInputSelector").each(function(i, e) {
    new NiceCountryInput(e).init();
  });
  // 初始化默认国旗
  $('#extra-selected-flag').attr('src', 'https://flagcdn.com/w23/ad.png');
});

以上方案完全不改动原有下拉组件的展示内容和交互逻辑，仅通过监听选中事件额外渲染国旗，完全符合需求。

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