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

推奨読書:

vue2はショッピングカートアドレス選択を実装

Angularサーバーサイドレンダリングメソッドの概要

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