A simple example of dynamically adding, moving, deleting, selecting all and other operations in a multi-select list box-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

A simple example of dynamically adding, moving, deleting, selecting all and other operations in a multi-select list box

May 16, 2016 pm 05:04 PM

list box delete Add to move

This article mainly introduces simple examples of dynamic addition, movement, deletion, and selection of all operations in a multi-select list box. Friends in need can come and refer to it. I hope it will be helpful to everyone.

&lt;%
dim a
a = split(Request.Form(&quot;sourceList&quot;),&quot;,&quot;)
Response.Write &quot;Source:&quot; &amp; Request.Form(&quot;sourceList&quot;) &amp; ubound(a) &amp; &quot;&lt;br&gt;Object:&quot; &amp; Request.Form(&quot;objectList&quot;) &amp; &quot;&lt;br&gt;&quot;
%&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot;&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;STYLE type=text/css&gt;
.bgsubleft {
BACKGROUND-POSITION: center bottom; BACKGROUND-IMAGE: url(images/bgleft.gif); BACKGROUND-REPEAT: repeat-x
}
.bgsubleftn {
BACKGROUND-POSITION: left bottom; BACKGROUND-IMAGE: url(images/bgleftn.gif); BACKGROUND-REPEAT: no-repeat
}
&lt;/STYLE&gt;
&lt;script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;&gt;
function addSelectedList()
{
var objSource = form1.sourceList;
var objObject = form1.objectList;
var sourcelen = objSource.length ;
for(var i=0;i&lt;sourcelen;i++){
    if (objSource.options[i].selected){
      if (!checkExist(objObject,objSource.options[i].value)){
        addtolist(objObject,objSource.options[i].text,objSource.options[i].value);
      }
    }
}
}
function addAllList()
{
var objSource = form1.sourceList;
var objObject = form1.objectList;
var sourcelen = objSource.length ;
for(var i=0;i&lt;sourcelen;i++){
    if (!checkExist(objObject,objSource.options[i].value)){
      addtolist(objObject,objSource.options[i].text,objSource.options[i].value);
    }
}
}
function removeSelectedList(noRemoveValue)
{
var objObject = form1.objectList;
for (var i=0;i&lt;objObject.length;i++){
    if (objObject.options[i].selected &amp;&amp; objObject.options[i].value != noRemoveValue)
    {
      objObject.options.remove(i);
      removeList(noRemoveValue);break;
    }
}
}
function removeAllList(noRemoveValue)
{
var objObject = form1.objectList;
var objLen = objObject.length;
for (var i=0;i&lt;objLen;i++){
    if ( objObject.options[i].value != noRemoveValue){
      objObject.options.remove(i);
      removeAllList(noRemoveValue);break;
    }
}
}
function selectedAll(obj)
{
for (var i=0;i&lt;obj.length;i++){
    obj.options[i].selected = true;
}
}
function checkExist(obj,value)
{
var isExist = false;
for (var i=0;i&lt;obj.length;i++){
    if (obj.options[i].value == value){
      isExist = true;
      break;
    }
}
return isExist;
}
function addtolist(obj,value,label){
obj.add(new Option(value,label));
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body bgcolor=&quot;#FFFFFF&quot;&gt;
&lt;form name=&quot;form1&quot; action=&quot;temp.asp&quot; method=&quot;post&quot;&gt;
&lt;table width=&quot;200&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;select name=&quot;sourceList&quot; size=&quot;10&quot; multiple id=&quot;sourceList&quot; style=&quot;width:150&quot;&gt;
      &lt;option value=&quot;a&quot;&gt;1&lt;/option&gt;
      &lt;option value=&quot;b&quot;&gt;2&lt;/option&gt;
      &lt;option value=&quot;c&quot;&gt;3&lt;/option&gt;
      &lt;%
      for i = 6 to 20
        Response.Write(&quot;&lt;option value=&quot;&quot;&quot; &amp; i+200 &amp; &quot;&quot;&quot;&gt;&quot; &amp; i+200 &amp; &quot;&lt;/option&gt;&quot; &amp; vbcrlf)
      Next
      %&gt;
    &lt;/select&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input name=&quot;add&quot; type=&quot;button&quot; id=&quot;add&quot; value=&quot;Add&quot; onclick=&quot;addSelectedList()&quot; style=&quot;width:100&quot;&gt;&lt;br&gt;
      &lt;input name=&quot;add&quot; type=&quot;button&quot; id=&quot;add&quot; value=&quot;Add all&quot; onclick=&quot;addAllList()&quot; style=&quot;width:100&quot;&gt;&lt;br&gt;   
    &lt;input name=&quot;add&quot; type=&quot;button&quot; id=&quot;add&quot; value=&quot;Remove&quot; onclick=&quot;removeSelectedList(&#39;a&#39;)&quot; style=&quot;width:100&quot;&gt;&lt;br&gt;
    &lt;input name=&quot;add&quot; type=&quot;button&quot; id=&quot;add&quot; value=&quot;Remove all&quot; onclick=&quot;removeAllList(&#39;a&#39;)&quot; style=&quot;width:100&quot;&gt;
    &lt;input name=&quot;add&quot; type=&quot;button&quot; id=&quot;add&quot; value=&quot;Select all&quot; onclick=&quot;selectedAll(form1.objectList)&quot; style=&quot;width:100&quot;&gt;&lt;/td&gt;
    &lt;td&gt;&lt;select name=&quot;objectList&quot; size=&quot;10&quot; multiple id=&quot;objectList&quot; style=&quot;width:150&quot;&gt;
      &lt;option value=&quot;a&quot;&gt;1&lt;/option&gt;
      &lt;option value=&quot;d&quot;&gt;4&lt;/option&gt;
      &lt;option value=&quot;e&quot;&gt;5&lt;/option&gt;
      &lt;%
      for i = 6 to 20
        Response.Write(&quot;&lt;option value=&quot;&quot;&quot; &amp; i &amp; &quot;&quot;&quot;&gt;&quot; &amp; i &amp; &quot;&lt;/option&gt;&quot; &amp; vbcrlf)
      Next
      %&gt;
    &lt;/select&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input name=&quot;subm&quot; type=&quot;submit&quot; value=&quot;Submit&quot; style=&quot;width:100&quot;&gt;&lt;/td&gt;
    &lt;td&gt; &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

The above is the entire content of this chapter. For more related tutorials, please visit JavaScript Video Tutorial!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn