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 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

VUE を使用して element-ui の ElTableColumn を拡張する方法

パフォーマンスを最適化するために JS タイムシェアリング関数を使用する方法

以上がJS を使用して左側のリストを右側にパンする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。