2011-06-30 8 views
2

私はカラムidとnameを持つSQLiteテーブルを持っています。 autocomplete.phpページからjsonのような行の配列を返します。このjsonでjqueryとJavaScriptを使用してオプションを選択(ドロップダウンリスト)する方法私はJavaScriptとJQueryを初めて使っていますが、私はGoogleで検索しましたが、どうやって見つけられませんでした。 ASP.NETではこれは簡単ですが、ここではわかりません。誰か助けてくれますか?jsonのドロップダウンリストを入力してください

これは私のJSONの例であり、はるかに長くなる可能性があります。

[ 
    { 
     "id": "1", 
     "name": "test" 
    }, 
    { 
     "id": "1", 
     "name": "test" 
    } 
] 
+0

が私の答えは参考になりました/あなたの問題を解決しますか? – Ashish

答えて

9

HTML:

<select id="sel"> 

</select> 

はJavaScript:

$(function() { 
    var data = [ 
     { 
     "id": "1", 
     "name": "test1"}, 
    { 
     "id": "2", 
     "name": "test2"} 
    ]; 
    $.each(data, function(i, option) { 
     $('#sel').append($('<option/>').attr("value", option.id).text(option.name)); 
    }); 
}) 

ここで働い例です。 http://jsfiddle.net/ms2Ma/

+0

JQuery構文を使用しないとどうなるでしょうか?私は '$( '

3

これを試すと、ドロップダウンボックスを構成するためのドロップダウンボックスとJSONノードをいくつでも持つことができます。

あなたは、いくつかの手順を実行する必要があります。

  • は、ドロップダウンボックスの配列を作成します(たとえば、あなたが電話を設定する必要があるならば、あなたは色、メモリなどのドロップダウンを使用する必要があります)
  • の作成コードで作成されたJSONオブジェクトです。 "level1"で始まり、任意の数のノードで終了する構成可能な項目名を変更しないでください。最初に作成している配列の項目のインデックスと同期する必要があります。ここで

データです:

var Dropdowns = ["Model", "Color", "Memory","design","covers","music"]; 
var Data ={"phones":[ 
    { 
    "oid":":000000F0:00000458:", 
    "level1":"3G", 
    "level2":"white", 
    "level3":"16GB", 
    "level4":"slim", 
    "level5":"Back cover", 
    "level6":"headphone", 
    "price":"£568.63", 
    "addToCart":"#Cart1" 
    }, 
    { 
    "oid":":000000F0:000003DA:", 
    "level1":"3G", 
    "level2":"black", 
    "level3":"16GB", 
    "level4":"slim", 
    "level5":"Flip cover", 
    "level6":"headphone", 
    "price":"£615.79", 
    "addToCart":"#Cart7" 
    }]}; 

は、ここで完全に動作するコードを参照してください: https://jsfiddle.net/raju_sumit/681ppgq0/5/

+0

すごいです。ありがとうございました –

関連する問題