JS做出左右列表平移功能

這次帶給大家JS做出左右列表平移功能，JS做出左右列表平移功能的注意事項有哪些，以下就是實戰案例，一起來看一下。

實作功能：

1.左邊的下拉框內容新增到右邊的下拉框，支援多選移動，同時將右邊的下拉框物件移除;

2.支援清單中項目上下位置的移動；

3.效果圖如下：

##Html程式碼

 
 
<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>    相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue2實作購物車位址選配

Angular服務端渲染方法總結

以上是JS做出左右列表平移功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！