当前位置：首页 → 问答吧 → List JavaScript

List JavaScript

时间：2007-09-04

来源：互联网

源码如下

CODE:

<?php
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>List</title>
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Copyright" content="Copyright" />
<meta name="author" content="wzhu" />
<meta name="description" content="description" />
<meta name="keywords" content="keywords" />
</head>

<body>

<table>
<tr>
      <td>
         <select id="one" size="10" multiple="multiple" style="width:150px">
         <option value="AAAAA">AAAAA</option>
         <option value="BBBBB">BBBBB</option>
         <option value="CCCCC">CCCCC</option>
         <option value="DDDDD">DDDDD</option>
         <option value="EEEEE">EEEEE</option>
         <option value="FFFFF">FFFFF</option>
         <option value="GGGGG">GGGGG</option>
         </select>
         <br />
         <input type="text" id="o_t" /><br />
         <input type="text" id="o_v" /><br />
         <input type="button" onclick="change()" value="Chage"/>
         <input type="button" onclick="add()" value="Add"/>
         <input type="button" onclick="del()" value="Delete"/>
         <input type="button"  onclick="sort('one')" value="Sort"/>
      </td>
      <td>
         <input type="button"  onclick="move('one','two')" value=">>>>>>"/><br />
         <input type="button"  onclick="move('two', 'one')" value="<<<<<<"/>
      </td>
      <td>
         <select id="two" size="10" multiple="multiple" style="width:150px">
         </select>
         <br />
         <input type="button"  onclick="s()" value="Select ALL"/>
         <input type="button"  onclick="sort('two')" value="Sort"/>
      </td>
</tr>
</table>

<br />

<script type="text/javascript">
/**
===========================================================
list.js
Author: wzhu
Email: [email protected]
First 2007/08/28
Modify
Last

Copyright 息 2006-2008
China. All Rights Reserved.

===========================================================
*/
//<![CDATA[

String.prototype.trim = function(){
return this.replace(/^s*|s*$/g, "");
}
function List()
{
this.m_OL;

this.setObjectById = function(id){
      this.m_OL = document.getElementById(id);
}

this.addOption = function( txt, val ){
      if( txt instanceof Array &&
         val instanceof Array &&
         txt.length == val.length )
      {
         for( var i = 0; i < txt.length; i++){
            var o = document.createElement("option");
            var t = document.createTextNode(txt[i]);
            o.setAttribute("value", val[i]);
            o.appendChild(t);
            this.m_OL.appendChild(o);
         }
      }else if( txt.trim() != "" && val.trim() != ""){
         var o = document.createElement("option");
         var oc = document.createTextNode(txt);
         o.setAttribute("value", val);
         o.appendChild(oc)
         this.m_OL.appendChild(o);
      }
      this.sort();
}

this.removeOption= function(){
      var l = this.m_OL.length;
      if(-1 == l){
         return;
      }
      for(var i=l-1; i >= 0 ; i--){
         var o = this.m_OL.options[i];
         if( o && o.selected == true){
            this.m_OL.removeChild(o);
         }
      }
}

this.changeOption= function(txt, val){
      var l = this.m_OL.length;
      if(-1 == l || txt.trim() == "" || val.trim() == ""){
         return;
      }
      for(var i=0; i < l; i++){
         var o = this.m_OL.options[ i ];
         if( o && o.selected == true ){
            o.setAttribute("value", val );
            o.firstChild.data = txt;
         }
      }
      this.sort();
}

this.getOptionValue = function(){
      var l = this.m_OL.length;
      if(-1 == l){
         return false;
      }
      var val = new Array();
      for(var i=0; i < l; i++){
         var o = this.m_OL.options[ i ];
         if( o && o.selected == true){
            val.push(o.getAttribute("value"));
         }
      }
      return val;
}

this.getOptionText = function(){
      var l = this.m_OL.length;
      if(-1 == l){
         return false;
      }
      var txt = new Array();
      for(var i=0; i < l; i++){
         var o = this.m_OL.options[ i ];
         if( o && o.selected == true){
            txt.push(o.firstChild.data);
         }
      }
      return txt;
}

this.selectAll = function(){
      var l = this.m_OL.length;
      for(var i=0; i < l; i++){
         this.m_OL.options[ i ].selected = true;
      }
}

this.sort = function(){
      var l = this.m_OL.length;
      for (var i=0; i < l-1; i++){
         for( var j = i+1; j < l; j++ ){
            var oi = this.m_OL.options[ i ];
            var oj = this.m_OL.options[ j ];
            if( oi.firstChild.data.toString() > oj.firstChild.data.toString() )             {
                  var tt = oi.firstChild.data
                  var tv = oi.getAttribute("value");
                  oi.setAttribute( "value", oj.getAttribute("value") );
                  oi.firstChild.data = oj.firstChild.data;
                  oj.setAttribute( "value", tv );
                  oj.firstChild.data = tt;
                  /*
                  var o = oi;
                  oi = oj;
                  oj = o;
                  //*/
            }
         }
      }
}
};

function move( f, t){
var of = new List();
var ot = new List();
of.setObjectById( f );
ot.setObjectById( t );
ot.addOption( of.getOptionText(), of.getOptionValue() );
of.removeOption();
}

function change(){
var o = new List();
o.setObjectById( "one" );
o.changeOption( document.getElementById("o_t").value, document.getElementById("o_v").value );
}

function del(){
var o = new List();
o.setObjectById( "one" );
o.removeOption();
}

function add(){
var o = new List();
o.setObjectById( "one" );
o.addOption( document.getElementById("o_t").value, document.getElementById("o_v").value );
}

function s(){
var o = new List();
o.setObjectById( "two" );
o.selectAll();
}

function sort( o ){
var obj = new List();
obj.setObjectById(o);
obj.sort();
}
// ] ]>
</script>
</body>
</html>
?>
demo如附件

本帖隐藏的内容需要回复才可以浏览

附件: 本帖附件需要回复才可下载或查看

作者: RICHARD 发布时间: 2007-09-04

:) 不错我爱你

作者: 逆雪寒发布时间: 2007-09-04

:lol 学习看看内

作者: 123waily 发布时间: 2007-09-04

碰到js就头疼，不知道这次的js是实现什么功能的？

作者: hotbone 发布时间: 2007-09-04

你降级了

作者: thankwsx 发布时间: 2007-09-04

学习一下,芝麻开门....