PHP中多选下拉框取值及样式异常修复求助

嘿，我来帮你搞定这个问题！你的代码里用了Chosen插件的chosen-select类，但下拉框还是普通样式，大概率是没正确引入Chosen的CSS和JS资源，也没初始化插件。另外，关于选中值以空格分隔展示的需求，我们也可以通过监听事件来实现。

问题分析 #

Chosen是依赖jQuery的UI插件，仅仅给select加类名是不够的——必须引入它的样式文件和脚本，再通过JS初始化，才能让它变成美观的多选下拉组件。

完整解决方案 #

1. 引入必要的资源文件 #

先确保页面里引入了jQuery（Chosen的依赖）、Chosen的CSS和JS：

<!-- 先引入jQuery -->
<script src="jquery.min.js"></script>
<!-- Chosen的样式文件 -->
<link rel="stylesheet" href="chosen.min.css">
<!-- Chosen的脚本文件 -->
<script src="chosen.jquery.min.js"></script>

（注：把上面的文件路径改成你实际项目中存放的路径）

2. 调整并完善你的select代码 #

我帮你修正了原代码里的小问题（比如重复判断导致所有选项被选中、空选项的干扰问题）：

<select data-placeholder="Click and Select Menu For Assign..." multiple class="chosen-select form-control" name="assign[]">
    <!-- 渲染已选中的菜单 -->
    <?php 
    $main_menu = explode(",", $menu); 
    // 先获取所有可选的菜单列表，用于判断选中状态
    $available_menus = [];
    $sql = "select menu from assign"; 
    $result = mysqli_query($con, $sql); 
    while($row = mysqli_fetch_array($result)) {
        $available_menus[] = $row['menu'];
    }
    foreach($main_menu as $fetch) { 
        // 判断当前菜单是否在可选列表中，设置选中状态
        $selected = in_array($fetch, $available_menus) ? 'selected' : '';
    ?>
    <option value="<?php echo $fetch; ?>" <?php echo $selected; ?>><?php echo $fetch; ?></option>
    <?php } ?>
    <!-- 隐藏空提示选项，Chosen会用data-placeholder作为提示 -->
    <option value="null" style="display:none;">Select Menu For Assign</option>
    <!-- 渲染未选中的可选菜单 -->
    <?php 
    foreach($available_menus as $menu_item) { 
        // 避免重复添加已选中的选项
        if(!in_array($menu_item, $main_menu)){
            echo "<option value='".$menu_item."'>".$menu_item."</option>";
        }
    } 
    ?>
</select>

<!-- 用来展示选中值的容器 -->
<div id="selected-display" style="margin-top:10px; padding:8px; border:1px solid #eee; min-height:24px;"></div>

3. 初始化Chosen并实现选中值展示 #

添加JS代码初始化插件，同时监听选中事件来更新展示内容：

$(document).ready(function(){
    // 初始化Chosen多选组件
    $(".chosen-select").chosen({
        width: "100%", // 让组件适配容器宽度
        placeholder_text_multiple: "Click and Select Menu For Assign..." // 多选时的占位提示
    });

    // 监听选中状态变化，更新展示文本
    $(".chosen-select").on("change", function(){
        let selectedTexts = [];
        // 收集所有选中的有效选项文本
        $(this).find("option:selected").each(function(){
            if($(this).val() !== "null"){
                selectedTexts.push($(this).text());
            }
        });
        // 用空格拼接后展示到容器中
        $("#selected-display").text(selectedTexts.join(" "));
    });

    // 页面加载完成后，先触发一次change事件初始化展示内容
    $(".chosen-select").trigger("change");
});

关键说明 #

• 原代码里的<?=($fetch==$fetch)? 'selected="selected"':''?>会让所有选项都被选中，我改成了根据可选列表判断选中状态，你可以根据实际业务逻辑再调整。
• Chosen的data-placeholder会自动作为多选时的占位提示，所以把红色空选项隐藏，避免干扰组件逻辑。
• 通过change事件监听选中状态，收集选中的选项文本并用空格拼接，最终展示在指定容器里。

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