请求将多选依赖下拉框改造为胶囊式选择框（参考MDB示例）

以下是改造后的代码，完全实现胶囊式（Pillbox）多选效果，同时保留原有的国家-州级联功能：

<!-- 引入必要资源：jQuery、MDB样式与脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.1/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.1/mdb.min.js"></script>

<form class="form-signin" method="post" id="serchform" action="search-profile-result.php?page_id=1">
  <label for="country">Country</label>
  <!-- 添加MDB多选组件类 -->
  <select class="form-select select-multiple" id="country" name="country[]" required="required" multiple>
    <option value="USA" label="USA">USA</option>
    <option value="UK" label="UK">UK</option>
    <option value="Canada" label="Canada">Canada</option>
  </select>

  <label for="state" class="mt-3">State</label>
  <select class="form-select select-multiple" id="state" name="state[]" required="required" multiple>
    <option disabled>Select Country First</option>
  </select>
</form>

<script>
$(function() {
  // 初始化MDB多选组件
  const countrySelect = new mdb.Select(document.getElementById('country'), {
    filter: true, // 可选：开启搜索过滤
    closeOnSelect: false // 多选时保持下拉框展开
  });
  const stateSelect = new mdb.Select(document.getElementById('state'), {
    filter: true,
    closeOnSelect: false
  });

  // 国家-州映射数据
  var states = {};
  states['USA'] = ['Alabama', 'Alaska', 'Arizona', 'Other'];
  states['UK'] = ['Aberdeenshire', 'Angus', 'Antrim', 'Other'];
  states['Canada'] = ['Alberta', 'British-Columbia', 'Manitoba', 'Other'];

  // 监听国家多选组件的选中变化
  document.getElementById('country').addEventListener('change.mdb.multiselect', function() {
    const selectedCountries = countrySelect.getSelectedValues();
    let selectedStates = [];

    // 收集所有选中国家对应的州
    selectedCountries.forEach(country => {
      if (states[country]) {
        selectedStates = selectedStates.concat(states[country]);
      }
    });

    // 清空州选项并重新填充
    const stateElement = document.getElementById('state');
    stateElement.innerHTML = '';

    if (selectedStates.length === 0) {
      // 无选中国家时添加占位符
      const placeholderOption = document.createElement('option');
      placeholderOption.disabled = true;
      placeholderOption.textContent = 'Select Country First';
      stateElement.appendChild(placeholderOption);
      stateSelect.update(); // 更新MDB组件状态
      return;
    }

    // 去重并排序州列表
    selectedStates = [...new Set(selectedStates)].sort();

    // 添加州选项
    selectedStates.forEach(state => {
      const option = document.createElement('option');
      option.value = state;
      option.textContent = state;
      stateElement.appendChild(option);
    });

    // 更新MDB州多选组件，使新选项生效
    stateSelect.update();
  });
});
</script>

关键修改说明： #

• 引入MDB资源：添加MDB的CSS和JS文件，这是实现胶囊式多选样式的核心依赖
• 组件初始化：使用mdb.Select初始化两个多选组件，配置了搜索过滤和多选时不关闭下拉框的选项
• 事件监听：替换原生change事件为MDB组件专属的change.mdb.multiselect事件，确保正确捕获选中状态变化
• 组件更新：每次修改州选项后调用stateSelect.update()，让MDB组件识别新的选项
• 数据处理优化：对州列表做了去重处理，避免多个国家包含相同州名时重复显示

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