JS makes left and right list panning function

This time I will bring you the function of panning the left and right lists with JS. What are the precautions for panning the left and right lists with JS? The following is a practical case, let's take a look.

Implementation functions:

1. The content of the left drop-down box is added to the right drop-down box, multi-select movement is supported, and the right drop-down box object is removed at the same time ;

2. Supports moving the upper and lower positions of items in the list;

3. The rendering is as follows:

Html code

 
 
<title>选择下拉菜单</title> 
<meta> 
<meta> 
 
 
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p> 

               

北京  上海  山东  安徽  重庆  福建  甘肃  广东  广西  贵州  海南  河北  黑龙江

上移    下移

  值： 

  <script> <!-- function moveOption(e1, e2){ try{ for(var i=0;i<e1.options.length;i++){ if(e1.options[i].selected){ var e = e1.options[i]; e2.options.add(new Option(e.text, e.value)); e1.remove(i); ii=i-1 } } document.myform.city.value=getvalue(document.myform.list2); } catch(e){} } function getvalue(geto){ var allvalue = ""; for(var i=0;i<geto.options.length;i++){ allvalue +=geto.options[i].value + ","; } return allvalue; } function changepos(obj,index) { if(index==-1){ if (obj.selectedIndex>0){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) } } else if(index==1){ if (obj.selectedIndex<obj.options.length-1){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) } } } //--> </script>   

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue2 implements shopping cart address selection

Angular server-side rendering method summary

The above is the detailed content of JS makes left and right list panning function. For more information, please follow other related articles on the PHP Chinese website!