Js多选面板

最新推荐文章于 2024-08-16 19:02:09 发布

luckystar2008

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量994

点赞数

文章标签： div function input generator border javascript

本文链接：https://blog.csdn.net/qincidong/article/details/6791014

版权

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

<!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='确定' οnclick=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;' οnclick="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;' οnclick="init(event,this);"></code><br>
5.单击面板中的“确定”按钮后，调用setVal()函数，返回选择的项的值。<br>
*******************************************************************************
</body>
</html>

转载请注明出处。

luckystar2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js多选面板

多选面板 <!-- showSelectorWin = function(obj,pros) { div = document.getElementById('div_' + obj.id); if (div != null &&
复制链接

扫一扫