一个多值选择器的JS代码 - ZH.net

//----------------------------------------------------------------------------------------------------------
//                                        Dual Select Control
//    Notes:
//       Functions for use with dual select pop-up window
//
//    Usage:
//       1. Create text field to hold results and button to popup dual select
//       2. Create HTML for dual select containing:
//             - call to this script
//             - the 2 multi-select boxes - these should contain actions for the onDblClick event:
//                ondblclick="one2two([reference to left select element], document.form1.right)" for left select box
//                ondblclick="two2one([reference to left select element], document.form1.right)" for right select box
//             - text box for searching [optional] - this should contain following event actions:
//                onkeyup="locateOption(this, [reference to left select element])"
//                onkeypress="checkForEnter(event, [reference to left select element], [reference to right select element])"
//             - buttons for move left/right (execute the one2two and two2one methods)
//             - buttons for moving selected elements up/down [optional] (execute the moveup() and movedown() methods)
//             - OK button (execute the processOK() method)
//             - onLoad event in BODY tag must execute init() method
//
//    Revision History:
//       - Created 9/21/01 - Aidan Curran (includes functions from the file 1to2.js)
//
//    Copyright ?995-2001, Agile Software Corp. All rights reserved.
//----------------------------------------------------------------------------------------------------------

// this function is used to move the items that have previously been selected (i.e. from the textbox) into the second list
// params: left multi-select element, right multi-select element, text element for results, use values flag (if true, option value used in comparison. if false, option text used)
function init(m1, m2, objResultsField, bUseValues) {
   var strOptionCompareValue;

   arrExistingItems = objResultsField.value.split(", ")     // create array of items from text box which will be seperated bu comma and space
   // loop through options in select list and move them to right if they match items in array
   for (var i = 0; i < m1.length; i++) {
      for (var j = 0; j < arrExistingItems.length; j++) {
         if (bUseValues)
            strOptionCompareValue = m1.options[i].value
         else
            strOptionCompareValue = m1.options[i].text
         if (strOptionCompareValue == arrExistingItems[j]) {
            m1.options[i].selected = true;   // select the matching fields
            break;
         }
      }
   }
   one2two(m1, m2); // move the selected items
}

// this function is used to place the selected items in the results textbox on the opener form
// params: text element for results, right multi-select element
function processOK(objResultsField, m2){

var results = "";

   for (i = 0; i < m2.length; i++) {
      results += m2.options[i].text;
      if (i != m2.length - 1) results += ", ";
   }

   if (objResultsField.value != "eHubs")
      objResultsField.value = results;
   window.close();
}

var intLastSelected; // var to hold index of last option selected with the search box

// match text being typed in in search box to option in select list and select that option
// params: input text, left multi-select element
function locateOption(objText, objSelect)
{
   if (objSelect.length > 0) { // should only work if there are options in the list
      var regExpr = new RegExp("^\\s*" + objText.value, "i")
      regExpr.ignoreCase = true;

      // deselect last selected item(s)
      if(objSelect.selectedIndex != -1) {
         for ( i=objSelect.selectedIndex; i < objSelect.length ; i++) {
            objSelect.options[i].selected = false;
         }
      }

      //if (intLastSelected != null) // last selection made by
      //   objSelect.options[intLastSelected].selected = false;

      for ( i=0; i < objSelect.length ; i++) {

        if (objSelect.options[i].text.search(regExpr) != -1) {
            objSelect.options[i].selected = true;
            intLastSelected = i;
            break;
        }
      }
    }
}

// move selected options from left to right if enter key pressed
function checkForEnter(evt, m1, m2, objText) {
   evt = (evt) ? evt : event;
   var charCode = (evt.which) ? evt.which : evt.keyCode;
   if (charCode == 13) {
      objText.value = "";
      one2two(m1, m2);
   }
   return false;
}

// Note: the following functions were originally from 1to2.js

function one2two(m1, m2)
{
    m1len = m1.length ;
    for ( i=0; i<m1len ; i++){
        if (m1.options[i].selected == true ) {
            m2len = m2.length;
            m2.options[m2len]= new Option(m1.options[i].text, m1.options[i].value);
        }
    }

j = -1;
    for ( i = (m1len -1); i>=0; i--){
        if (m1.options[i].selected == true ) {
            m1.options[i] = null;
   j = i;
        }
    }

if (j == -1)
  return;

sortOptions (m2);

// move focus to the next item
if (m1.length <= 0)
  return;

if ((j < 0) || (j > m1.length))
  return;

if (j == 0)
  m1.options[j].selected = true;
else if (j == m1.length)
  m1.options[j-1].selected = true
else
  m1.options[j].selected = true;
}

function two2one(m1, m2)
{
    m2len = m2.length ;
for ( i=0; i<m2len ; i++){
  if (m2.options[i].selected == true ) {
   m1len = m1.length;
   m1.options[m1len]= new Option(m2.options[i].text);
  }
}

j = -1;
for ( i=(m2len-1); i>=0; i--) {
  if (m2.options[i].selected == true ) {
   m2.options[i] = null;
   j = i;
  }
}

if (j == -1)
  return;

sortOptions (m1);

// move focus to the next item
if (m2.length <= 0)
  return;

if ((j < 0) || (j > m2.length))
  return;

if (j == 0)
  m2.options[j].selected = true;
else if (j == m2.length)
  m2.options[j-1].selected = true
else
  m2.options[j].selected = true;
}

function deleteOption(object,index) {
object.options[index] = null;
}

function addOption(object,text,value) {
    var defaultSelected = false;
    var selected = false;
    var optionName = new Option(text, value, defaultSelected, selected)
    object.options[object.length] = optionName;
    object.options[object.length-1].selected = false;

}

function sortOptions(what) {
    var copyOption = new Array();
    for (var i=0;i<what.options.length;i++)
        copyOption[i] = new Array(what[i].text,what[i].value);

copyOption.sort(sorti);

for (var i=what.options.length-1;i>-1;i--)
deleteOption(what,i);

for (var i=0;i<copyOption.length;i++)
addOption(what,copyOption[i][0],copyOption[i][1])
}

function getselected (selections, m1, m2)
{
selections.value = "";
for (var i=0; i<m2.length; i++)
{
  selections.value += m2.options[i].text + ";";
}

// reset the multiple selections for the two list box
// because cgi will send multiple values to the form otherwise
for (i=0; i<m1.length; i++)
  m1.options[i].selected = false;
for (i=0; i<m2.length; i++)
  m2.options[i].selected = false;

return true;
}

/**********************************************************************************
* the following functions were originally in ValidationsLib.js
*********************************************************************************/
function moveUp(m2)
{
   for (i=0; i<m2.length; i++)
   {
if (m2.options[i].selected == true)
{
  var opText = m2.options[i].text;
  var opValue = m2.options[i].value;

  if (i > 0)
  {
   m2.options[i] = new Option (m2.options[i-1].text, m2.options[i-1].value, true);
   m2.options[i-1] = new Option (opText, opValue);
   m2.options[i-1].selected = true;
  }
}
   }
}

// Options transfer between select lists. Handles multiple moves.
// This function takes following parameters:
// @param selectSrc - select box name
// @param selectTrg - select box name
// @param frm - form name
// @param append - append or prepend
// @param ignore - flag to indicate the fields without any values should be ignored.
function moveOptions(selectSrc,selectTrg,frm,ignore,prepend)
{
    var source = eval("document."+frm+"."+selectSrc);
    var target = eval("document."+frm+"."+selectTrg);

divId = selectTrg + "_div" ;
divs = document.getElementsByTagName("DIV");
myTarget = eval("divs." + divId);

var arr = new Array();

// create an array of new <OPTION> elements
    while (source.selectedIndex >= 0)
    {
  text = source.options[source.selectedIndex].text;
  value = source.options[source.selectedIndex].value;

  if ((typeof ignore != "undefined" && ignore) && (value == null || value == ''))
  {
   source.options[source.selectedIndex].selected = false;
   continue;
  }

  if ( text.indexOf("----") != -1 )
  {
   source.options[source.selectedIndex].selected = false;
   continue ;
  }

        arr[arr.length] = "<OPTION value=\"" + doEscape(value) + "\">" + doEscape(text) + "</OPTION>";

  eval(source.options[source.selectedIndex] = null);
    }

joinSelectTag(myTarget,arr,prepend);

target = eval("document."+frm+"."+selectTrg);

// deselect all selected options
for ( i=0; i<target.length; i++ )
  target.options[i].selected = false ;

// select last added element
if ( target.length >= 1 )
{
  if ( typeof prepend != "undefined" && prepend )
   target.options[0].selected=true ;
  else
   target.options[target.length-1].selected=true ;
}
}

// use this function if the dual select has sections within
// calls moveOptions, BUT has the prepend flag turned on
function moveSectionOptions(selectSrc,selectTrg,frm,ignore,seperator)
{
// in case of groups, prepend values to top of select box
moveOptions(selectSrc,selectTrg,frm,ignore,true)
}

// move selected options from left to right if enter key pressed in text box
function moveOptionsOnEnter(evt,objText,selectSrc,selectTrg,frm,ignore) {
   evt = (evt) ? evt : event;
   var charCode = (evt.which) ? evt.which : evt.keyCode;
   if (charCode == 13) {
      objText.value = "";
      moveOptions(selectSrc,selectTrg,frm,ignore);
   }
   return false;
}

// move selected options from left to right if enter key pressed in text box
function moveSectionOptionsOnEnter(evt,objText,selectSrc,selectTrg,frm,ignore,seperator) {
   evt = (evt) ? evt : event;
   var charCode = (evt.which) ? evt.which : evt.keyCode;
   if (charCode == 13) {
      objText.value = "";
      moveSectionOptions(selectSrc,selectTrg,frm,ignore,seperator)
   }
   return false;
}

// joins the final select tag together
// handles append or prepend modes
function joinSelectTag(myTarget,arr,prepend)
{
if ( typeof prepend == "undefined" || !prepend )
{
  myTarget.innerHTML = myTarget.innerHTML.substring(0,myTarget.innerHTML.length-9) + arr.join() + myTarget.innerHTML.substring(myTarget.innerHTML.length-9,myTarget.innerHTML.length);
}
else
{
  var NS6 = (navigator.vendor == ("Netscape6") || navigator.product == ("Gecko"));
  var i = NS6 ? myTarget.innerHTML.indexOf("<option") : myTarget.innerHTML.indexOf("<OPTION") ;

  if ( i == -1 )
   var i = NS6 ? myTarget.innerHTML.indexOf("</select>") : myTarget.innerHTML.indexOf("</SELECT>") ;

  var selectTag = myTarget.innerHTML.substring(0,i);

// join <SELECT> tag
myTarget.innerHTML = selectTag + arr.join() + myTarget.innerHTML.substring(i,myTarget.innerHTML.length);
}
//alert('inner html = ' + myTarget.innerHTML);
}

// sorts an array
function sorti(a, b)
{
var A = a.toUpperCase ();
var B = b.toUpperCase ();
if (A <= B)
return -1
else
return 1
}

发表于 2005-09-06 09:46 ZH.net 阅读(445) 评论(0) 编辑收藏举报