js动态的把左边列表添加到右边，可上下移动。



 
   new document 
  Meta  
  Meta  
  Meta  
  Meta  
   
  
  
  Meta  
 
 
<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">form <span style="color: #ff0000">method<span style="color: #0000ff">="post"<span style="color: #ff0000"> name<span style="color: #0000ff">="myform"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">table <span style="color: #ff0000">border<span style="color: #0000ff">="0"<span style="color: #ff0000"> width<span style="color: #0000ff">="300"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">tr<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">td <span style="color: #ff0000">width<span style="color: #0000ff">="40%"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">select <span style="color: #ff0000">style<span style="color: #0000ff">="WIDTH:100%"<span style="color: #ff0000"> multiple name<span style="color: #0000ff">="list1"<span style="color: #ff0000"> size<span style="color: #0000ff">="12"<span style="color: #ff0000"> ondblclick<span style="color: #0000ff">="moveOption(document.myform.list1,document.myform.list2)"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="北京"<span style="color: #0000ff">>北京<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="上海"<span style="color: #0000ff">>上海<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="山东"<span style="color: #0000ff">>山东<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="安徽"<span style="color: #0000ff">>安徽<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="重庆"<span style="color: #0000ff">>重庆<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="福建"<span style="color: #0000ff">>福建<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="甘肃"<span style="color: #0000ff">>甘肃<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="广东"<span style="color: #0000ff">>广东<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="广西"<span style="color: #0000ff">>广西<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="贵州"<span style="color: #0000ff">>贵州<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="海南"<span style="color: #0000ff">>海南<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="河北"<span style="color: #0000ff">>河北<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">option <span style="color: #ff0000">value<span style="color: #0000ff">="黑龙江"<span style="color: #0000ff">>黑龙江<span style="color: #0000ff"></<span style="color: #800000">option<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">select<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">td<span style="color: #0000ff">> 
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;width</span><span style="color: #0000ff"&gt;="20%"</span><span style="color: #ff0000"&gt; align</span><span style="color: #0000ff"&gt;="center"</span><span style="color: #0000ff"&gt;></span> 
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="button"</span><span style="color: #ff0000"&gt; value</span><span style="color: #0000ff"&gt;="<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>"</span><span style="color: #ff0000"&gt; onclick</span><span style="color: #0000ff"&gt;="moveOption(document.myform.list1,document.myform.list2)"</span><span style="color: #0000ff"&gt;></span>
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;br</span><span style="color: #0000ff"&gt;/></span> 
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;br</span><span style="color: #0000ff"&gt;/></span> 
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="button"</span><span style="color: #ff0000"&gt; value</span><span style="color: #0000ff"&gt;="<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>"</span><span style="color: #ff0000"&gt; onclick</span><span style="color: #0000ff"&gt;="moveOption(document.myform.list2,document.myform.list1)"</span><span style="color: #0000ff"&gt;></span> 
        <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span> 

        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;width</span><span style="color: #0000ff"&gt;="40%"</span><span style="color: #0000ff"&gt;></span> 
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;select </span><span style="color: #ff0000"&gt;style</span><span style="color: #0000ff"&gt;="WIDTH:100%"</span><span style="color: #ff0000"&gt; multiple name</span><span style="color: #0000ff"&gt;="list2"</span><span style="color: #ff0000"&gt; size</span><span style="color: #0000ff"&gt;="12"</span><span style="color: #ff0000"&gt; ondblclick</span><span style="color: #0000ff"&gt;="moveOption(document.myform.list2,document.myform.list1)"</span><span style="color: #0000ff"&gt;></span> 
            <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;select</span><span style="color: #0000ff"&gt;></span> 
        <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span> 

        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span> 
            <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;button </span><span style="color: #ff0000"&gt;onclick</span><span style="color: #0000ff"&gt;="changepos(list2,-1)"</span><span style="color: #ff0000"&gt; type</span><span style="color: #0000ff"&gt;="button"</span><span style="color: #0000ff"&gt;></span>上移<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></span> 
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;br</span><span style="color: #0000ff"&gt;/></span> 
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;button </span><span style="color: #ff0000"&gt;onclick</span><span style="color: #0000ff"&gt;="changepos(list2,1)"</span><span style="color: #ff0000"&gt; type</span><span style="color: #0000ff"&gt;="button"</span><span style="color: #0000ff"&gt;></span>下移<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></span> 
        <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span> 
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span> 
<span style="color: #0000ff"></<span style="color: #800000">table<span style="color: #0000ff">><span style="color: #000000">

值：<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="text"<span style="color: #ff0000"> name<span style="color: #0000ff">="city"<span style="color: #ff0000"> size<span style="color: #0000ff">="40"<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">form<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">language<span style="color: #0000ff">="JavaScript"<span style="color: #0000ff">>

<span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> moveOption(e1,e2){

<span style="background-color: #f5f5f5; color: #0000ff">try<span style="background-color: #f5f5f5; color: #000000">{

<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000">(<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> i<span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000">0<span style="background-color: #f5f5f5; color: #000000">;i<span style="background-color: #f5f5f5; color: #000000"><<span style="background-color: #f5f5f5; color: #000000">e1.options.length;i<span style="background-color: #f5f5f5; color: #000000">++<span style="background-color: #f5f5f5; color: #000000">){

<span style="background-color: #f5f5f5; color: #0000ff">if<span style="background-color: #f5f5f5; color: #000000">(e1.options[i].selected){

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> e <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> e1.options[i];

e2.options.add(<span style="background-color: #f5f5f5; color: #0000ff">new<span style="background-color: #f5f5f5; color: #000000"> Option(e.text,e.value));

e1.remove(i);

ii<span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000">i<span style="background-color: #f5f5f5; color: #000000">-<span style="background-color: #f5f5f5; color: #000000">1<span style="background-color: #f5f5f5; color: #000000">

}

}

document.myform.city.value<span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000">getvalue(document.myform.list2);

}

<span style="background-color: #f5f5f5; color: #0000ff">catch<span style="background-color: #f5f5f5; color: #000000">(e){}

} 
    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; getvalue(geto){ 
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; allvalue </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;""</span><span style="background-color: #f5f5f5; color: #000000"&gt;; 
            </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;for</span><span style="background-color: #f5f5f5; color: #000000"&gt;(</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; i</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;i</span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;geto.options.length;i</span><span style="background-color: #f5f5f5; color: #000000"&gt;++</span><span style="background-color: #f5f5f5; color: #000000"&gt;){ 
                    allvalue </span><span style="background-color: #f5f5f5; color: #000000"&gt;+=</span><span style="background-color: #f5f5f5; color: #000000"&gt;geto.options[i].value </span><span style="background-color: #f5f5f5; color: #000000"&gt;+</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;; 
                } 
            </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span><span style="background-color: #f5f5f5; color: #000000"&gt; allvalue; 
         } 

    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; changepos(obj,index) { 
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;if</span><span style="background-color: #f5f5f5; color: #000000"&gt;(index</span><span style="background-color: #f5f5f5; color: #000000"&gt;==-</span><span style="background-color: #f5f5f5; color: #000000"&gt;1</span><span style="background-color: #f5f5f5; color: #000000"&gt;){ 
                </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;if</span><span style="background-color: #f5f5f5; color: #000000"&gt; (obj.selectedIndex</span><span style="background-color: #f5f5f5; color: #000000"&gt;></span><span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;){ 
                    obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex</span><span style="background-color: #f5f5f5; color: #000000"&gt;-</span><span style="background-color: #f5f5f5; color: #000000"&gt;1</span><span style="background-color: #f5f5f5; color: #000000"&gt;)) 
                    } 
           } </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;else</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;if</span><span style="background-color: #f5f5f5; color: #000000"&gt;(index</span><span style="background-color: #f5f5f5; color: #000000"&gt;==</span><span style="background-color: #f5f5f5; color: #000000"&gt;1</span><span style="background-color: #f5f5f5; color: #000000"&gt;){ 
                    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;if</span><span style="background-color: #f5f5f5; color: #000000"&gt; (obj.selectedIndex</span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt;obj.options.length</span><span style="background-color: #f5f5f5; color: #000000"&gt;-</span><span style="background-color: #f5f5f5; color: #000000"&gt;1</span><span style="background-color: #f5f5f5; color: #000000"&gt;){ 
                            obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex</span><span style="background-color: #f5f5f5; color: #000000"&gt;+</span><span style="background-color: #f5f5f5; color: #000000"&gt;1</span><span style="background-color: #f5f5f5; color: #000000"&gt;)) 
                             } 
                    } 
            } 
<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>
js动态的把左边列表添加到右边，可上下移动。

猜你在找的JavaScript相关文章
