您的位置：首页 > 编程语言

Select 分类标签 optgroup 代码展示

2010-10-21 14:43 381 查看

注：
1、optgroup开始结束标签间不能有空格,否则optgroup.hasChildNodes() 始终为true.

2、增加了排序功能，先optgroup中options按value排序，然后按照otpgroup标签排序.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>select-optgroup</title>
<head>
<mce:script type="text/javascript"><!--
function CreateOptgroup(obj,obj1,value,text){
var addoption = document.createElement("option");
addoption.value = value;
addoption.appendChild(document.createTextNode(text));
var addoptgroup = document.createElement("optgroup");
var optgroup=obj.options[obj.selectedIndex].parentNode;
if(optgroup.label)
{
addoptgroup.label = optgroup.label;
if(obj1.length==0)
{
addoptgroup.appendChild(addoption);
obj1.appendChild(addoptgroup);
}
var i;
var optgroup1;
for(i=0;i<obj1.length;i++)
{
optgroup1=obj1.options[i].parentNode;
if(optgroup1.label==addoptgroup.label) break;
}
if(optgroup1.label==addoptgroup.label)
{
optgroup1.appendChild(addoption);
}else{
addoptgroup.appendChild(addoption);
obj1.appendChild(addoptgroup);
}
SortOptgroup(obj1);
}
}
function compareOptgroupLabel(a, b) {
if (a.label < b.label) return -1;
if (a.label > b.label) return 1;
return 0;
}
function optgroupsToArray(selectObj)
{
var optgroupArray = new Array();
var optgroup;
while(selectObj.length>0)
{
optgroup=selectObj.options[0].parentNode;
if(optgroup.label)
{
optgroupArray[optgroupArray.length]=optgroup;
OptOptionsSort(optgroup);
selectObj.removeChild(optgroup);
}
}
return 	optgroupArray;
}
function arrayToOptgroups(selectObj,optgroupArray)
{
for ( var i = 0; i < optgroupArray.length; i++)
{
var optgroup = optgroupArray[i];
selectObj.appendChild(optgroup);
}
}
function SortOptgroup(selectObj)
{
var optgroupArray = optgroupsToArray(selectObj);
optgroupArray.sort(compareOptgroupLabel);
arrayToOptgroups(selectObj, optgroupArray);
}
function OptOptionsSort(optgroup)
{
var OptOptionsArray=OptOptionsToArray(optgroup);
OptOptionsArray.sort(compareOptOptionsValueInt);
arrayToOptOptions(optgroup,OptOptionsArray);
}
function OptOptionsToArray(optgroup)
{
var OptOptionsArray=new Array();
while(optgroup.hasChildNodes())
{
OptOptionsArray[OptOptionsArray.length]=optgroup.firstChild;
optgroup.removeChild(optgroup.firstChild);
}
return OptOptionsArray;
}
function compareOptOptionsValueInt(a, b) {
if (parseInt(a.value) < parseInt(b.value)) return -1;
if (parseInt(a.value) > parseInt(b.value)) return 1;
return 0;
}
function arrayToOptOptions(optgroup,OptOptionsArray)
{
for ( var i = 0; i < OptOptionsArray.length; i++)
{
var optOptions = OptOptionsArray[i];
optgroup.appendChild(optOptions);
}
}
function removeOptgroup(obj,i){
var optgroup=obj.options[i].parentNode;
optgroup.removeChild(obj.options[i]);
if(!optgroup.hasChildNodes()) obj.removeChild(optgroup);
}
function newMoveOptions(e1,e2)
{
try{
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
var e = e1.options[i];
CreateOptgroup(e1,e2,e.value,e.text);
removeOptgroup(e1,i);
i=i-1
}
}
}
catch(e){}
return true;
}
// --></mce:script>
</head>
<body>
<form method="post" name="table" action="" >
<table>
<tr><td>
<select name="file_types" id="file_types" size=12 style="width:250px" ondblclick="newMoveOptions(this, document.forms[0].allow_types, true);" multiple>
<optgroup label="Picture Files"><option value="0001">GIF</option><option value="0002">JPG</option></optgroup>
<optgroup label="Text Files"><option value="0003">PDF</option><option value="0004">XML</option></optgroup>
<optgroup label="Audio Files"><option value="0005">MP3</option><option value="0006">Special test file format</option></optgroup>
</select>
</td>
<td>
<select name="allow_types" id="allow_types" size="12" style="width:250px" ondblclick="newMoveOptions(this, document.forms[0].file_types, true);" multiple>
</select>
</td></tr>
</table>
</html>
<mce:script type="text/javascript"><!--
SortOptgroup(document.forms[0].file_types);
// --></mce:script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： function types file action audio table

相关文章推荐

新的分享

章节导航