ホームページ > 記事 > ウェブフロントエンド > JavaScript は、左右に移動する 2 つの選択ドロップダウン ボックス オプションを実装します。
この記事では、2 つの選択ドロップダウン ボックスのオプションの左右の移動を実現する JavaScript コードを紹介します。興味のある学生はこの記事を参照してください。
今日は何もすることがないので、2 つの選択ドロップダウン ボックスを使用する js を書きました。ボックスを押して要素を相互に移動します。私は小さなプログラムの JavaScript を学び始めたばかりですが、最適化の余地がまだたくさんあります。
JavaScriptコード
コードは次のとおりです | |
//最初の選択オブジェクトを取得する varselectElement = document.getElementById("first"); varoptionElements = selectElement.getElementsByTagName("オプション"); varlen = optionElements.length;
If(!(selectElement.selectedIndex==- 1)) // 選択要素がない場合、selectDindex は -1 です {
// 2番目の選択オブジェクトを取得 varselectelement2 = document.getElementById( "secend"); "); } }
// すべてを右に移動 functionmoveAll() { } // 最初の選択オブジェクトを取得 varselectElement = document.getElementById ("first"); varoptionElements = selectElement.getElementsByTagName("option"); varlen = optionElements.length; //alert(len);
//選択された最初のものを変更します 配列を反転しますin varfirstOption =newArray(); for(vark=len-1;k>=0;k--) } varlens = firstOption.length; // 2 番目の選択オブジェクトを取得します varselectElement2 = document.getElementById("secend"); for(varj=lens-1;j>=0;j-- ) {le Selectionlement2.appendchild (firstOption [j]) }}; FunctionMoveLeft () { // まず 2 番目の 2 番目を取得して、2 番目の 2 番目の select オブジェクトを取得します varselectElement = document.getElementBy Id("秒"); varoptionElement = selectElement.getElementsByTagName("option"); varlen = optionElement.length;
// 再び 1 位の要素を取得します if(!(selectElement.selectedIndex==-1)) { varfirstSelectElement = document.getElementById("first"); for(i=0;i { ,,,,,,,,,,,,,,, 、、、、、、、、、、、、、、プロジェクト!"); } } //すべてを左に移動 functionmoveAllLeft() { varselectElement = document.getElementById("secend"); varoptionElements = document.getElements ByTagName("option"); varlen = optionElements.length; varoptionEls =newArray(); for(vari=len-1;i>=0;i--) varlens = optionEls.length; varfirstSelectElement = document .getElementById("first"); for(varj=lens-1;j>=0;j--) { firstSelectElement.appendChild( optionEls[j]); } } |
HTMLコード
コードは以下の通りです
.select_move { margin:0px auto; width:206px; margin-top:300px;} { float; :left;} .select_move_2 { float:left;} .select_move_3 { float:left;}
< ; pclass = "select_move"&gt; ; optionValue = "bmw"&gt; bmw&lt; optionvalue = "cadillac"&gt; cadillac&lt;/option&gt; >」 「moveAll()」 /> ;selectsize="10 "id="secend"multiple="multiple">
関連する推奨事項: JavaScript を使用して左右に移動する 2 つの選択ドロップダウン ボックス オプションを実装するサンプル コード共有 |
以上がJavaScript は、左右に移動する 2 つの選択ドロップダウン ボックス オプションを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。