使用Select2选择选项后所在div自动隐藏问题求助

先梳理下你的问题：你从数据库获取客户数据，用Select2实现搜索选择功能，但选中选项后，包含选择框的#old_customer div会自动隐藏，没法重新选择，不过选中的值还留在页面上。先把你的代码贴出来方便分析：

<div class="col-12 col-sm-12 col-md-5 col-lg-5 col-xl-5" id="old_customer" style="display: block;&gt; 
    <label for="customersID" class="control-label">Customer </label> 
    <select name="customersID" id="customersID" onchange="getCustomersDue()" > 
        <option value="">Select Customer </option> 
        <?php foreach($customers as $p) { 
            $selected = ($p['customersID'] == $this->input->post('customersID')) ? ' selected="selected"' : ""; 
            echo '<option value="'.$p['customersID'].'" '.$selected.'>'.$p['name'].'-'.$p['mobile'].'</option>'; 
        } ?> 
    </select>
</div>

<script>
$("#customersID").select2();
</script>

可能的原因&解决方案 #

1. 先修复HTML语法错误

你的div标签有个明显的语法问题：style="display: block;> 这里少了一个闭合的双引号，应该改成 style="display: block;">。DOM解析错误很可能会引发各种奇怪的页面行为，先把这个问题解决。

2. 检查getCustomersDue()函数的逻辑

select的onchange事件触发了getCustomersDue()，十有八九是这个函数里不小心写了隐藏#old_customer的代码。你可以打开这个函数的定义，找一找有没有类似下面的代码：

// 这类代码会直接隐藏你的容器div
$('#old_customer').hide();
// 或者原生JS写法
document.getElementById('old_customer').style.display = 'none';

如果找到的话，删除或者注释掉这部分代码——毕竟这个函数的目的应该是获取客户的应付款数据，没必要操作容器的显示状态。

要是暂时找不到问题，也可以先在getCustomersDue()开头加一行强制显示的代码来验证：

function getCustomersDue() {
    // 临时添加，测试是否能阻止div隐藏
    $('#old_customer').show();
    // 你的原有业务代码...
}

如果这样修改后div不再隐藏，就确定是这个函数的问题，针对性调整即可。

3. 确保Select2初始化时机正确

把Select2的初始化代码放在DOM完全加载完成之后，避免因为DOM未就绪导致的异常：

$(document).ready(function() {
    $("#customersID").select2();
});

做完这些修改后，刷新页面测试一下，应该就能解决div自动隐藏的问题了。

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