如何将现有多选下拉框改造为带复选框的下拉框？

我来帮你搞定这个需求，不用完全推翻现有代码，下面给你两种实用方案，你可以根据项目情况选择：

方案一：纯自定义实现（无第三方依赖） #

这种方案不需要引入额外插件，完全靠HTML+CSS+JS实现，灵活性更高。

步骤1：替换原生Select为自定义结构 #

先把原来的<select>隐藏，然后新增一个自定义的下拉容器：

<!-- 隐藏原生select，用于表单提交时传递数据 -->
<select class="form-control dropdown-check-list" style="display: none;" id="ddl_parameter" multiple="multiple" name="tablecol" required></select>

<!-- 自定义带复选框的下拉框 -->
<div class="custom-dropdown">
  <button class="dropdown-toggle" id="dropdown-btn">请选择参数</button>
  <ul class="dropdown-menu" id="dropdown-options"></ul>
</div>

步骤2：添加CSS样式美化 #

给自定义下拉框加基础样式，让它看起来像原生下拉：

.custom-dropdown {
  position: relative;
  margin-left: 1px;
  margin-top: 9px;
  width: fit-content;
}

.dropdown-toggle {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  min-width: 200px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
}

.dropdown-menu li {
  padding: 6px 12px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #f5f5f5;
}

.dropdown-menu input[type="checkbox"] {
  margin-right: 8px;
}

步骤3：修改AJAX函数渲染复选框选项 #

调整你的GetParamter()函数，把后端返回的数据渲染到自定义的下拉列表里，同时同步到隐藏的原生select：

function GetParamter() {
  $.ajax({
    url: "/GetParamter",
    type: 'get',
    dataType: 'JSON',
    success: function (response) {
      const dropdownOptions = $('#dropdown-options');
      const nativeSelect = $('#ddl_parameter');
      // 清空原有内容
      dropdownOptions.empty();
      nativeSelect.empty();

      // 遍历数据渲染选项
      response.forEach(item => {
        // 渲染自定义复选框选项
        const li = $('<li></li>');
        const checkbox = $('<input type="checkbox" />').val(item.value);
        const label = $('<span></span>').text(item.text);
        
        li.append(checkbox).append(label);
        dropdownOptions.append(li);

        // 同步添加到原生select的option，用于表单提交
        nativeSelect.append($('<option></option>').val(item.value).text(item.text));
      });

      // 给复选框绑定事件，同步原生select的选中状态
      dropdownOptions.find('input[type="checkbox"]').on('change', function() {
        const value = $(this).val();
        const option = nativeSelect.find(`option[value="${value}"]`);
        option.prop('selected', $(this).is(':checked'));
      });
    },
    error: function(err) {
      console.error('获取参数失败:', err);
    }
  });
}

步骤4：添加下拉显示/隐藏逻辑 #

最后加一段JS处理下拉框的展开和收起：

$(document).ready(function() {
  // 初始化加载参数
  GetParamter();

  // 下拉按钮点击事件
  $('#dropdown-btn').on('click', function(e) {
    e.stopPropagation();
    $('#dropdown-options').toggle();
  });

  // 点击页面其他区域关闭下拉
  $(document).on('click', function() {
    $('#dropdown-options').hide();
  });

  // 点击下拉列表内部不关闭
  $('#dropdown-options').on('click', function(e) {
    e.stopPropagation();
  });
});

方案二：使用jQuery插件快速实现（适合追求效率的场景） #

如果你的项目已经引入jQuery，也可以用成熟的下拉复选框插件，比如dropdown-checklist（将插件的CSS和JS文件放到项目目录后直接引入即可）：

步骤1：引入插件资源 #

<link rel="stylesheet" href="path/to/dropdown-checklist.css">
<script src="path/to/dropdown-checklist.js"></script>

步骤2：修改原生Select的初始化 #

保留你原来的select标签，去掉multiple属性（插件会处理多选），然后在AJAX成功后初始化插件：

function GetParamter() {
  $.ajax({
    url: "/GetParamter",
    type: 'get',
    dataType: 'JSON',
    success: function (response) {
      const select = $('#ddl_parameter');
      select.empty();
      
      response.forEach(item => {
        select.append($('<option></option>').val(item.value).text(item.text));
      });

      // 初始化下拉复选框插件
      select.dropdownchecklist({
        // 可选配置，比如下拉框宽度、选中值的显示方式等
        width: 200,
        textFormatFunction: function(options) {
          const selected = options.filter(':selected');
          return selected.length > 0 ? `${selected.length} 个已选` : '请选择参数';
        }
      });
    },
    error: function(err) {
      console.error('获取参数失败:', err);
    }
  });
}

注意事项 #

• 不管用哪种方案，都要确保表单提交时，选中的参数值能正确传递到后端（方案一靠隐藏的原生select，方案二插件会自动处理）。
• 如果后端返回的数据结构不是{value: '', text: ''}，记得调整代码里的属性名，比如改成item.id和item.name之类的。

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