jquery mobile listbox_jqueryの値の原則とコード

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 実装コードであり、要所にコメントが含まれています。

コードをコピー

コードは次のとおりです: //データをバインド var vlist = "" ; //json データをトラバースします

jQuery.each(vData.datalist, function(i, n) {

vlist = "" n .text " });
//データを 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");