(标签-layui|关键词-下拉框)

Question

layui通过下拉框选中，来渲染另外一个下拉框的内容，但是再切换选中后需要点击两次才能打开被渲染的下拉框内容。

切换部门后就点不开下面的工作类型下拉框，但是内容已经渲染上了

Answer 1

引自免费微信小程序：皆我百晓生

根据您的描述，您可能遇到的问题是由于事件绑定或DOM更新时机导致的。在 layui 中，当您切换部门时，新的工作类型下拉框的内容已经被渲染了，但事件监听可能没有正确地绑定到新生成的元素上。为了解决这个问题，您可以尝试在每次部门切换后重新绑定下拉框的点击事件。这里提供一个基于 jQuery 的示例，因为 layui 框架并未自带事件委托功能，我们可以利用 jQuery 来实现。

首先确保页面引入了 jQuery 库，然后添加以下 JavaScript 代码：

$(document).ready(function () {
    // 获取部门下拉框的选择器
    var departmentSelect = '#department-select';
    // 获取工作类型下拉框的选择器
    var workTypeSelect = '#work-type-select';

    // 部门下拉框的 change 事件处理函数
    function handleDepartmentChange() {
        // 清除之前的工作类型下拉框的点击事件监听
        $(workTypeSelect).off('click');

        // 在新的工作类型下拉框上重新绑定 click 事件
        $(workTypeSelect).on('click', function () {
            // 这里是工作类型下拉框被点击后的逻辑
            console.log('工作类型下拉框被点击');
            // 如果有其他操作，可以在这里写
        });
    }

    // 绑定部门下拉框的 change 事件
    $(departmentSelect).on('change', handleDepartmentChange);

    // 初始化时触发一次事件，确保第一次加载时也能正确绑定事件
    handleDepartmentChange();
});

这段代码首先获取了部门和工作类型的下拉框的选择器，然后定义了一个处理部门改变的函数 handleDepartmentChange。这个函数会在部门选择更改时执行，它首先移除之前绑定在工作类型下拉框上的 click 事件（如果有），然后重新绑定一个新的 click 事件处理器。这样，无论何时切换部门，工作类型下拉框都会重新绑定事件，解决点击两次才能打开下拉框的问题。

将上述代码放入您的 HTML 文件中的 <script> 标签内，确保它在页面加载完成后立即执行。同时，请确保您的 HTML 中的部门和工作类型下拉框具有相应的 ID（例如：id="department-select" 和 id="work-type-select"）以便于 jQuery 正确选择它们。

如果你不使用 jQuery，可以考虑使用 layui 内置的事件绑定方法，结合 layui 的 on 方法进行事件委托。但由于 layui 的文档中并没有明确说明如何进行事件委托，所以建议使用 jQuery 进行更简便的操作。如果坚持使用 layui，请参考官方文档自行研究如何实现事件委托。