简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JSで左右リストパン機能を作る

php中世界最好的语言
リリース： 2018-06-13 09:58:40
オリジナル
1539 人が閲覧しました

今回はJSで左右のリストをパンする機能についてお届けします。 JSで左右のリストをパンする際の注意点は何ですか？実際の事例を見てみましょう。

実装された機能:

1. 左側のドロップダウン ボックスの内容を右側のドロップダウン ボックスに追加し、複数選択の移動をサポートし、同時に右側のドロップダウン ボックス オブジェクトを削除します。

2. リスト内の項目の上位と下位の移動をサポートします。

3. レンダリングは次のとおりです:

HTML コード

 
 
选择下拉菜单 
 
 

 
 

选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。
 

 
 
 
 
 
 
 
 

 
 
 

 

 
 
 
 
 
 

 
 

 
值： 

 
 
 
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

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


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

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

関連ラベル：
js左边列表移到右边
ソース：php.cn
前の記事：el 式を使用して空でないかどうかを判断します 次の記事：JQueryを使ってフォームバリデーションを実装するにはどうすればよいでしょうか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
React - ハンドソン可能なデータグリッド: 列の移動とステータスの更新 私は React のライブラリを使用しており、ヘッダーのリスト (配列) と、反対側にテーブル データを含む配列があります。ドキュメントを読んだ後、「左に列を追加」および「右に列を...
から 2023-09-15 21:51:29
0
1
307
R Shiny で、「すべて選択」チェックボックスの個別の行/列を持つチェックボックス テーブルを作成するにはどうすればよいですか? RShiny を使用して、各セルにチェックボックスが含まれるテーブルを (たとえば「DT」パッケージ経由で) 表示したいと考えています。各行と列のヘッダーの横に、選択すると、対応す...
から 2023-09-08 15:24:52
0
1
217
HTML テーブル内の画像を右揃えにする方法 Django Web サイトを作成し、結果を上部に小さなフォームのように表示したいと考えています。左側にテーブルがあり、右側のテーブルに 2 つの写真と別の列を追加したいと考えてい...
から 2023-09-02 09:04:11
0
1
231
順序付きリストの番号を右揃えにするためのヒント 次のコードを考えてみましょう。出力では、リスト項目は確かに右側にありますが、数値は正しい位置にありません。数値も正しい位置に揃えるにはどうすればよいですか? ol{width:15...
から 2023-08-31 12:03:12
0
1
356
JSは効果がありません JS ファイルと CSS ファイルは正しく参照されていますが、サイドバーの質問リストやその他のオプションをクリックしても、右側に対応するタブ ページが表示されません。サイドバーのオ...
から 2019-06-22 14:59:15
0
2
1003
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！