ホームページ >ウェブフロントエンド >jsチュートリアル >jquery mobile listbox_jqueryの値の原則とコード
jquery mobile listbox_jqueryの値の原則とコード
- WBOYオリジナル
- 2016-05-16 17:34:451301ブラウズ
jQuery のリストボックス操作の原理は難しくありません。リストボックス内で選択した項目を移動して、必要な移動効果を実現することです。この例では、json データ構造を使用してリストボックスを動的にバインドしました。これにより、json の使用にも慣れることができます。
まず単純な HTML を見てみましょう。サーバー コントロールは自動的に HTML タグに変換されるため、この例ではサーバー コントロールを使用しませんでした。次のように:
は次のように変換されます:
コードをコピーします コードは次のとおりです。
" id="btnRight" value =">>" />
コードをコピー
コードは次のとおりです: //data var vData = { "datalist ": [
{ "data" : "jQuery", "text": "jQuery" }, { "data": "Asp.net", "text": "Asp.net" },
{ "データ": "インターネット" , "テキスト": "インターネット" },
{ "データ": "Sql", "テキスト": "Sql" }
]
以下は jQuery 実装コードであり、要所にコメントが含まれています。
{ "データ": "インターネット" , "テキスト": "インターネット" },
{ "データ": "Sql", "テキスト": "Sql" }
]
以下は jQuery 実装コードであり、要所にコメントが含まれています。
コードをコピー
コードは次のとおりです: //データをバインド var vlist = "" ; //json データをトラバースします
jQuery.each(vData.datalist, function(i, n) { vlist = "});
//データを listLeft にバインド
$("#listLeft").append(vlist); >$ ("#btnRight").click(function() {
//data オプションで選択されたデータセットは変数 vSelect
var vSelect = $("#listLeft option:selected") に割り当てられます;
// クローンデータが listRight に追加されます
vSelect.clone().appendTo("#listRight");
// listRight のオプションも削除します
vSelect.remove(); 🎜>});
//右に移動
$("#btnLeft").click(function() {
var vSelect = $("#listRight option:selected");
vSelect .clone().appendTo("#listLeft");
//データを listLeft にバインド
$("#listLeft").append(vlist); >$ ("#btnRight").click(function() {
//data オプションで選択されたデータセットは変数 vSelect
var vSelect = $("#listLeft option:selected") に割り当てられます;
// クローンデータが listRight に追加されます
vSelect.clone().appendTo("#listRight");
// listRight のオプションも削除します
vSelect.remove(); 🎜>});
//右に移動
$("#btnLeft").click(function() {
var vSelect = $("#listRight option:selected");
vSelect .clone().appendTo("#listLeft");
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。