原理: 点击文本框 显示隐藏的div层 div层中是遍历后的菜单选项 当做option
Jsp:
文本框 显示到页面:
<input type="text" readonly="readonly" name="keyword" size="30" id="area" value="${keyword}"/>
div层 隐藏 页面加载时候遍历子项: kwList:后台List<KeyWord对象>并给以get和set
<div id="areaDiv" style="display: none">
<div id="areaDiv1" style="display: block;">
<s:iterator value="kwList" var="depart"> <!-- 遍历子项-->
<span style="display: block; white-space: nowrap;">
<input type="checkbox" name="area_select"
value="<s:property value='keywordName' />" />
<s:property value='keywordName' /> </span>
</s:iterator>
</div>
<center>
<div id="sureDiv" style="height: 25px;padding-bottom: 3px" >
<input type="button" value="全选" id="select_all" class="btn"
name="select_all" />
<input type="button" value="确定" class="btn" id="area_ok"
name="area_ok" />
<input type="button" value="清除" class="btn" id="de_select_all"
name="de_select_all" />
</div>
</center>
</div>
js中的代码: js版本可自选
<script type="text/javascript" src="<%=basePath%>js/date/jquery-1.5.1.js"></script>
<script type="text/javascript">
var start_x=0; //div隐藏层的相关坐标
var start_y=0;
var end_x=0;
var end_y=0;
$(function(){
//去除空格,使用到的地方 字符串.Trim(); ---不知道对不对
String.prototype.Trim=function(){
return this.replace(/(^\s*)|(\s*$)/g,"");
}});
//点击一个对象并获取其Id 实现对应功能
$(document).bind("click", function(e) {
e = e || window.event;
var which = e.target || e.srcElement;
if (which.id == "area") {
t();
return;
}
if(which.id=="select_all"){
var areas = $("input[name='area_select']");
var isFlag = 0;
for ( var i = 0; i < areas.length; i++) {
if (areas[i].checked) {
isFlag++;
}
}
if (isFlag == areas.length) {
for ( var i = 0; i < areas.length; i++) {
areas[i].checked = false;
}
$("#select_all").attr("value", "全选");
} else {
for ( var i = 0; i < areas.length; i++) {
areas[i].checked = true;
}
$("#select_all").attr("value", "反选");
}
}
if (which.id == "de_select_all") {
$("#select_all").attr("value", "全选");
var areas=$("input[name='area_select']");
for ( var i = 0; i < areas.length; i++) {
areas[i].checked = false;
}
return;
}
if (which.id == "area_ok") {
$("#areaDiv").css("display", "none");
var areaIds = "";
var areaValue = "";
var areas=$("input[name='area_select']");
for(var i = 0; i < areas.length; i++) {
if (areas[i].checked) {
areaIds += areas[i].value + ",";
}
}
//获取拼接后的字符串 显示到文本框中
document.getElementById("area").value = areaIds.substring(0,areaIds.length - 1);
return;
}
var x = e.pageX;
var y = e.pageY;
if (x >= start_x && x <= end_x && start_y <= y && end_y >= y) {
$("#areaDiv").css("display", "block");
} else {
$("#areaDiv").css("display", "none");
start_x = 0;
start_y = 0;
end_x = 0;
end_y = 0;
}
});
//t()函数是 对div隐藏层的 加载和数据是否选中的绑定
function t(){
$("#select_all").attr("value","全选");
var areaValue=$("#area").val();
areaValue=areaValue.replace(/^s+|s+$/g,'');
var areas=$("input[name='area_select']");
if(areaValue!=""){
//如果文本框不为空
//第一步:设置所有复选框均不选中
for(var i=0;i<areas.length;i++){
areas[i].checked=false;
}
//第二步:获取文本框中的值 分割后遍历checked集合 并是对应到的字符串option的checked="true"
var areaArray=areaValue.split(",");
for(var i=0;i<areaArray.length;i++){
for(var j=0;j<areas.length;j++){
var ij=areaArray[i];
if(ij==areas[j].nextSibling.nodeValue.Trim()){
areas[j].checked=true;
break;
}
}
}
}else{
for(var i=0;i<areas.length;i++){
areas[i].checked=false;
}
}
//获取 文本框的相应坐标
var left=$("#area").offset().left;
var top=$("#area").offset().top+$("#area").outerHeight();
var areaDivHeight;
start_x=left;
start_y=top;
end_x=left+$("#area").outerWidth();
end_y=top+$("#areaDiv").outerHeight();
areaDivHeight=end_y;
//设定div隐藏层的坐标
if(areaDivHeight>=200)
$("#areaDiv1").css("height",200).css("overflow","auto");
}else{
$("#areaDiv1").css("overflow-x","auto");
}
$("#areaDiv").css("display","block").css("overflow","hidden").css("line-height","25px").css("background","#ffffff").css("position","absolute").css("border","1px solid #cccccc").css("left",left+"px").css("top",top+"px").css("width",$("#area").outerWidth()-2);
}
</script>
缺陷:点击【全选】后 【全选】会变成【反选】 但是 如果点击文本框 子项中有对应的勾选值
是不能【反选的】 原因: div隐藏层出现时 初始化为【全选】
-------------------- 如果有什么错误的地方或好的修改方法 请指大家不吝赐教
相关推荐
在网页开发中,有下拉菜单的复选框是一种常见的交互元素,它允许用户在一组选项中进行多项选择,同时这些选项又能隐藏在一个下拉菜单内以节省空间。本示例涉及的技术点主要包括HTML基础、CSS样式以及JavaScript编程...
该插件是改良的layer的树形插件,在原始的layer插件中的树形结构是没有复选框的,改良后可用以拿来做权限系统的权限选择
可以通过自定义样式来改变下拉菜单的外观,使其看起来更像一个带有复选框的列表。 - **JavaScript/jQuery**:JavaScript用于处理用户交互,例如点击事件,用来显示和隐藏下拉菜单,以及跟踪用户的选中状态。 2. **...
3. **复选框的多选**:若需实现下拉框中的多个选项可同时选中,可以使用QListWidget或QTreeView,它们支持多选并有类似复选框的功能。 通过以上介绍,你应该已经了解了如何在QT中组合使用下拉框和复选框。这不仅...
我们需要覆盖这个方法,使得在弹出下拉列表时,列表中的每个项目都带有复选框,并且这些复选框的状态与模型中的状态同步。 5. **处理用户交互**: 当用户在下拉列表中点击一个复选框时,我们需要捕获这个事件,并...
总之,创建一个带有复选框的时间下拉菜单是网页交互设计中的一个重要环节,它提升了用户体验,使得选择时间和日期变得更加直观和便捷。通过熟练掌握HTML、CSS和JavaScript,我们可以根据需求灵活定制这样的功能,并...
本项目名为"带复选框三级树形菜单",是基于jQuery实现的一个简单但功能齐全的三级树形菜单,特别适合用于系统的下拉菜单功能。 首先,我们来理解树形菜单的概念。树形菜单是一种数据结构的可视化表示,它模仿了...
总结,"jquery无限极复选框下拉树"是一个基于jQuery和layui的交互式组件,它结合了复选框、下拉菜单和无限级树结构,提供了全选/单选功能,适用于需要展现和操作层次数据的场景。通过理解和运用这些知识点,开发者...
这允许我们在下拉列表中展示带有复选框的项,而不是简单的文本。 6. **UI布局**:在Java GUI设计中,`LayoutManager`用于控制组件的布局。对于这个特定的实现,可能使用`BoxLayout`或`GridBagLayout`来确保文本框和...
Bootstrap是一个流行的前端框架,它提供了Selectpicker插件,可以实现带有复选框的下拉列表。这个插件允许用户在下拉菜单中看到可选项,同时每个选项前都有一个复选框。 4. **Custom Components** 对于更复杂的UI...
在描述中提到的"带有复选框",意味着我们需要为每个选项添加复选框,让用户可以同时选择多个项目。这在Flex中通常通过自定义ItemRenderer来实现。ItemRenderer是Flex中用来定制组件显示样式和行为的类,我们可以通过...
压缩包中的“combox.html”文件很可能是一个演示或者实例化的HTML页面,展示了如何使用这个带有复选框和搜索功能的下拉列表。在这个文件中,我们可以期待看到HTML结构,以及内联或外部引用的CSS和JavaScript代码,...
2. **搜索功能**:集成在下拉复选框中的搜索功能允许用户输入关键词,快速定位到他们需要的选项。这对于包含大量选项的下拉菜单特别有用,例如在人员搜索或企业搜索中,用户无需滚动浏览整个列表,只需键入关键信息...
本篇文章将深入探讨如何在Bootstrap中实现带有全选功能的select复选框,以及相关的技术要点。 一、Bootstrap Select 复选框 Bootstrap 的 Select 复选框通常用于创建多选下拉菜单。它通过结合HTML `<select>` 元素...
在JavaScript编程中,下拉复选框是一种常见的用户界面元素,它允许用户在多个选项中进行选择,并且通常带有搜索或过滤功能以提高用户体验。在本项目中,我们看到一个结合了Bootstrap框架和数据库交互的下拉菜单实现...
在Web开发中,"带CheckBox的下拉多选框"是一种常见的用户界面组件,它结合了下拉列表的紧凑性和复选框的多选功能,为用户提供了一种更高效的交互方式。这种组件常用于需要用户从多个选项中选择多个项的情况,如设置...
在这个场景中,我们将讨论如何使用 POI 在 Java 中生成带有下拉选项和批注的 Excel 模板。 首先,我们需要理解 POI 的核心组件,如 HSSFWorkbook(用于 .xls 文件)和 XSSFWorkbook(用于 .xlsx 文件)。这些工作簿...
lovcombo结合了下拉框和复选框的特性,使得用户可以在一个下拉菜单中选择多个选项,每个选项前都有一个复选框供用户勾选。 实现这个功能首先需要了解EXTJS的组件模型,包括`Ext.form.field.ComboBox`基础类。我们...
复选框(Checkbox)是网页表单中常见的一种元素,用于让用户从多个选项中多选。通过自定义复选框,我们可以改变其默认的样式,使其更加符合网站的整体设计风格,或者增加互动性,如使用图标代替文字,或者添加过渡...
通过上述步骤,我们成功地创建了一个带有滚动条的多选下拉列表框。这个组件不仅可以帮助用户方便地选择多个选项,还提供了简洁的操作方式,极大地提高了用户体验。在实际开发中,可以根据需求进一步定制这个组件,...