<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 多选面板 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="JavaScript">
<!--
showSelectorWin = function(obj,pros) {
div = document.getElementById('div_' + obj.id);
if (div != null && div != 'undefined')
{
div.style.display = 'block';
}
else {
div = document.createElement('div');
div.setAttribute('id','div_' + obj.id);
div.style.width = pros.width;
div.style.height = pros.height;
div.style.border = pros.border;
div.style.background = pros.background;
div.style.top = event.y-parseInt(obj.style.height)/2;
div.style.left = event.x-parseInt(obj.style.width)/2>0?event.x-parseInt(obj.style.width)/2:0;
div.style.display = 'block';
div.style.position = 'absolute';
var tbl = "<table id = 'selectTab' border=0 cellspacding=0 cellpadding=0 width="+pros.width+">";
var ind = 0;
var span = document.getElementById(pros.optsId);
if (span)
{
var opts = span.childNodes;
for (var i=0;i<opts.length ;i++ )
{
if (opts[i].nodeType == 1)
{
var chb = opts[i];
if (chb)
{
if (i % pros.oneRowSize == 0)
{
tbl += "<tr>";
}
var chbText = opts[i+1].nodeValue;//input元素后的文本
tbl += "<td><input type='checkbox' value='" + chb.value + "'>" + chbText +"</td>";
ind++;
if (ind == 3)
{
tbl += "</tr>";
ind = 0;
}
}
}
}
}
tbl += "<tr align='center'><td colspan=3><input type='button' value='确定' onclick=setVal('"+obj.id+"');></td></tr>";
tbl += "</table>";
div.innerHTML = tbl;
document.body.appendChild(div);
}
}
// 用于配置显示的选择面板的样式
Pros = function() {
this.width = '120px';//要显示的选择面板的宽度
this.height = '100px';// 要显示的选择面板的高度
this.border = '';// 选择面板边框样式
this.background = 'white';//// 选择面板背景
this.oneRowSize = 3; // 1行显示的checkbox数目
this.optsId = 'multiSelectSpan';//将所有的checkbox元素都放入span，作为多选的checkbox
}
setVal = function(id) {
var retVal = "";
var tab = document.getElementById('selectTab');
var rows = tab.rows;
for (var i=0;i<rows.length-1 ; i++)
{
var tr = tab.rows[i];
for (var j=0;j<tr.cells.length ;j++ )
{
var td = tr.cells[j];
var chexbox = td.firstChild;
if (chexbox.checked)
{
retVal += chexbox.value + ",";
}
}
}
var div = document.getElementById('div_' + id);
div.style.display = 'none';
retVal = retVal.substring(0,retVal.lastIndexOf(','));
alert('你选择了' + retVal);
return retVal;
}
init = function(e,obj) {
var pros = new Pros();
pros.width = '200px';//要显示的选择面板的宽度
pros.height = '120px';// 要显示的选择面板的高度
pros.border = '1px solid yellow';// 选择面板边框样式
showSelectorWin(obj,pros);
}
//-->
</script>
</head>
<body>
选择技术：
<input name="i_ts_desc" id="i_ts_desc" style='width:120px;height:20px;' onclick="init(event,this);">
<span id='multiSelectSpan' style="display:none">
<input type='hidden' name='select' value='Java'>Java
<input type='hidden' name='select' value='C'>C
<input type='hidden' name='select' value='C++'>C++
<input type='hidden' name='select' value='C#'>C#
<input type='hidden' name='select' value='Jsp'>Jsp
<input type='hidden' name='select' value='Php'>Php
<input type='hidden' name='select' value='Vb'>Vb
<input type='hidden' name='select' value='Linux'>Linux
<input type='hidden' name='select' value='Js'>Js
</span>
<br>
*******************************************************************************<br>
单击文本框，显示一个多选面板。<br>
用法：<br>
1.在body中写一个span,id为multiSelectSpan(可以在init()函数中修改id)<br>
2.在span中写入需要作为多选项的隐藏域。如上面的multiSelectSpan<br>
3.在Init()函数中配置显示的面板样式(width,height,border等)<br>
4.在body中添加一个input控件,加入Onclick事件=init(event,this)，如：<br>
<code><input name="i_ts_desc" id="i_ts_desc" style='width:120px;height:20px;' onclick="init(event,this);"></code><br>
5.单击面板中的“确定”按钮后，调用setVal()函数，返回选择的项的值。<br>
*******************************************************************************
</body>
</html>
转载请注明出处。
相关推荐
lovcombo.js则包含了JavaScript代码，用于创建和配置LovCombo实例，以及与后端数据源的交互。css和js文件可能分别包含了组件的样式和额外的JavaScript库，用于增强功能或优化性能。 创建一个ExtJS 3的LovCombo实例...
ExtJS是一个强大的JavaScript框架，主要用于构建富客户端应用。在日常开发中，我们经常需要处理日期相关的功能，例如日期选择器。在默认情况下，ExtJS的日期选择器（DatePicker）只支持单选，即用户只能选择一个日期...
Ember CLI 多选面板一个两面板多选组件。 使用代码并受到 Nico Gevers 插件启发。基本用法 {{multiselect-panels content=myList label="Favourite Movies" selected=favouriteMovies}}演示查看上的演示。安装git ...
EXT3.2 多选下拉框是一种在EXT JS框架中实现的用户界面组件，它允许用户在下拉菜单中选择多个选项。EXT JS是一个基于JavaScript的富客户端应用开发框架，用于构建桌面级的Web应用。EXT3.2是EXT JS的一个版本，尽管...
在EXTJS这个强大的JavaScript框架中，虽然原生并未直接提供多选列表（Multi Select List）组件，但开发者可以通过自定义组件或者利用EXTJS现有的组件进行组合来实现这一功能。EXTJS是一个用于构建富客户端Web应用的...
2. **JavaScript / jQuery**：在JavaScript或者jQuery的帮助下，我们可以动态地创建和管理DOM元素，实现多选效果。这通常包括监听用户的点击事件，处理checkbox的状态，并更新视觉反馈。 3. **Checkbox**：在每个...
它提供了大量的预定义组件，如表格、面板、窗口、表单等，其中包括我们关注的MultiComboBox。 MultiComboBox是ExtJS中的一个自定义组件，它扩展了基础的ComboBox类，增加了多选的功能。默认情况下，ComboBox只允许...
5. **CSS和JS文件**：lovcombo可能需要额外的CSS样式文件来定义其外观，以及JavaScript文件来扩展或定制其行为。将这些文件放置在项目正确的位置，并确保在JS文件中引用CSS的路径正确无误。 6. **使用组件**：在...
ExtJS4是一款强大的JavaScript框架，用于构建富客户端Web应用程序。在这个特定的情况下，我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree，它在ExtJS4中实现了单选和多选功能，并且具备展开选中指定节点的...
在实际项目中，自定义多选下拉框标签可以广泛应用于表单、筛选器、设置面板等多个场景。通过引入这个标签，开发者可以快速创建符合设计规范的多选下拉框，减少重复代码，提升开发效率。 五、总结 自定义多选下拉框...
panelHeight: 'auto', // 自动调整下拉面板的高度 onSelect: function(value, data) { // 选中项时触发的回调函数 console.log('选中了：', value, data); }, onUnselect: function(value, data) { // 取消选中...
5. **bootstrap-select.min.js**：这是专为Bootstrap下拉框增强功能的JavaScript插件，它扩展了原始的`<select>`元素，增加了多选、搜索、分页等高级功能。这个插件与CSS文件配合，实现了美观且实用的多选下拉框。 ...
jQuery作为一个强大的JavaScript库，极大地简化了DOM操作，使得我们可以轻松地实现各种动态效果和交互。在这个"jQuery单选多选按钮样式美化代码.zip"压缩包中，包含了一套利用jQuery实现的单选和多选按钮的美化方案...
EXTJS是一个强大的JavaScript前端框架，提供了丰富的组件和灵活的布局管理，可以构建出美观且功能丰富的用户界面。而SWFUpload则是一个基于Flash的文件上传组件，它支持多文件选择、进度条显示等特性，弥补了HTML...
3. **JavaScript/jQuery**：`js`文件中包含交互逻辑，包括初始化穿梭框、处理用户点击事件、更新数据源以及同步两个列表的显示。JavaScript库如jQuery可以简化DOM操作，提高代码效率。使用`$.ajax`或Fetch API可以...
EXT 提供了丰富的组件库，包括表格、面板、窗口、表单等，而“多选”功能则主要体现在 EXT 的表单组件中，特别是多选框（CheckboxGroup）。 EXT 的多选功能通常通过 CheckboxGroup 组件来实现，这是一个可以包含多...
2. **CMS管理系统**：在CMS中实现多选分类，我们需要考虑如何在后台面板上呈现这些选项，以便用户能直观地进行选择。这可能包括创建一个交互式的树状视图，用户可以通过点击来选择或取消选择分类。同时，还要确保在...
首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在这个项目中，我们利用jQuery的灵活性和强大的API来创建一个自定义的多选下拉框组件。 1. **结构设计**： - 外部...
在本文中，我们将探讨如何使用JavaScript实现点击参数面板按钮显示或隐藏数据的功能，特别以FineReport报表工具为例。 首先，我们需要在FineReport报表的参数面板上创建必要的元素。这里包括一个标签控件和一个按钮...
至于"extjs"标签，这表明整个话题是关于EXTJS框架的，EXTJS是一个强大的JavaScript库，用于构建富客户端Web应用程序。它提供了丰富的组件库，包括表格、窗口、面板、菜单等，而`Ext.ux.form.LovCombo`就是EXTJS生态...