JavaScript实现动态弹框选项选择与清除功能

本文将详细介绍如何使用JavaScript实现一个动态的弹框选项选择器，该弹框包含科室分类功能，用户可以通过点击复选框、取消选中、点击选项X图标以及切换大类和小类来管理他们的选择。以下步骤和代码片段将帮助你理解整个过程。 首先，HTML结构部分包含了一个输入框和一个隐藏的下拉列表，用于存储默认值或通过URL参数传递的值。`<input type="text" onclick="getWindowPop()">`允许用户点击文本框时弹出弹框，`<input type="hidden">`则用于保存用户的最终选择。`<div id="closePopWindow">`是弹框的实际容器，其中包含标签菜单和选择区域。 当点击弹出的科室分类弹窗时，JS代码`getWindowPop()`会被触发。在这个函数中，可以设置弹窗的样式，如隐藏显示状态，并初始化相关的DOM元素。例如，创建一个包含科室分类的大类（临床医学、辅助科室、其他）的选项列表，以及一个用于关闭弹框的X图标。 在弹窗内部，每个大类后面有小类，用户可以选择大类或小类。为了实现动态切换，可以为大类和小类添加事件监听器，比如`click`事件，当点击某个类别时，会改变对应复选框的状态，并可能更新大类或小类的选择逻辑，确保最多只能选中3个选项。 当用户点击已选中的选项X图标时，应该取消选中相应的复选框，并在已选div中移除这个选项。同时，如果大类被选中但包含的小类被取消，那么大类也应该失去选中状态。这些交互逻辑可以通过`event.target`来获取点击元素并操作其关联的复选框。 在用户完成选择后，点击“确定”按钮，应该执行一个回调函数，处理用户的最终选择，可能包括将选中的科室分类存储在服务器端或更新页面显示。这通常通过提交表单或者修改`cg_str`隐藏字段的值来实现。 下面是一段示例的JavaScript代码片段，展示了弹出窗口、事件处理和选择结果的处理部分： ```javascript function getWindowPop() { $('#closePopWindow').fadeIn(); // 初始化选中状态 var selectedOptions = []; // 获取初始选中的大类或小类ID var initialSelection = ... // 根据需求填充初始值 // 处理大类和小类点击事件 $('#tagChange li').on('click', function(e) { var item = $(this); if (item.is('.pop_close')) return; item.toggleClass('selected'); // 更新选中选项及逻辑处理 ... }); // 处理选项X点击事件 $('.pop_sele_cont_bo .option-x').on('click', function() { var checkbox = $(this).prev('input[type="checkbox"]'); checkbox.prop('checked', false); selectedOptions.remove(checkbox.val()); }); // 确定按钮点击事件 $('#confirmButton').on('click', function() { // 检查选择数量限制 if (selectedOptions.length > 3) return; // 提交或更新数据 var cg_str = selectedOptions.join(','); // ... }); } ``` 本文提供了实现一个具有动态选择和交互功能的弹框选项展示器的详细指南，包括HTML结构、JavaScript事件处理和结果处理的关键部分。根据实际项目需求，你可以根据这段代码框架进行定制和扩展。