3

私はjQueryを使用して2つの要素.change()を作成しようとしています.1つ目は州のリストを生成するためのもので、2つ目は都市のリストを生成するためのものです.<select><select id="state"><select id="city">

州と都市の値はハードコーディングされませんが、Web サービスから渡された値から生成されます。

生成されるオプションのリストは次のように動作するはずです: ユーザーが選択した値から州を選択すると、リストを取得して都市<select id="state">の を生成する Web サービスに渡されます。<select id="city">

これを実装する方法が本当にわかりません。誰でも私にアドバイスできますか？

4

3 に答える 3

4

それは次のように見えるはずです

$(function(){
// populate the states list from Ajax 


    $.ajax( {
       url:"/listStates",
       type:"GET",
       success:function( data ) { 
            var statesList = data;
            if ( typeof(data) == "string" ){
                 statesList = JSON.parse(data);
            }
            $.each( statesList, function( index, state ){
                     $("#state").append($("<option></option>",{value:state.value, text:state.label});
                });
       },
       error:function( result ) { 
            console.log(["error getting states",result]);
       }
    });

    // register on state list change
    $("#state").change( function(){
            // on change dispatch an AJAX request for cities and populate cities 
        $.ajax({ url : "/listCities",
            data : {"state": $("#state").val() },
            type:'GET',
            success:function( data ) {
                var citiesList = data; // assuming list object
                if ( typeof(data) == "string"){ // but if string
                    citiesList = JSON.parse( data );
                } 
                            $("#city").empty();
                $.each(citiesList, function(index,city){
                    $("#city").append($("<option></option>", {"value":city.value, "text":city.label}));
                }
            },
            error:function( result ){ console.log(["error", result]); }

    })
});

これで開始できますが、ここでは lint のベスト プラクティスには従いませんでした。

ウォークスルー

  • select with id state で「変更」イベントに登録します。
  • 変更が発生すると、場所「/listCities」への Ajax リクエストを呼び出します
  • この場所は「GET」メソッドで呼び出されると思います
  • 現在選択されている州を渡すので、サーバーはリストする都市を認識します。
  • Ajax でエラーが発生した場合は、エラーをコンソールに記録します。
  • Ajax が成功した場合は、各都市の値とラベルを含むオプションを使用して、id "city" を select に入力します。

コードを書いている間、私は次のことを想定しました

  • 状態を期待するルート GET /listCities があります。

  • そのルートからの応答は、各都市の値とラベルのリストを含む JSON です。このようなもの ：

    [{ value : "AM" , label : "Amsterdam" }, .... ]

この例で読む必要があるのは、次のことだけです。

ご不明な点がございましたら、私の回答にコメントしてください。喜んで説明/追加/変更させていただきます

于 2013-02-02T11:55:15.763 に答える
3

これを達成するには、いくつかの手順に従う必要があります。

  • 最初に、ページの読み込み時に ajax を介して最初の国のリストを入力します (私の仮定)
  • 次に.change()、国のリストでイベントを作成します
  • これによりリクエストが送信され、選択した国ごとに州リストのレスポンスが返されます。

この方法でテストできます：

$(function(){
   $.ajax({
      url:your url,
      type: 'post',
      dataType: 'json', // or your choice of returned data
      success: function(data){
          $.each(data, function(i, v){
             $('<option value="'+v.name+'">'+v.text+'</option>').appendTo('#country');
          });
      }
   });

   $('#country').change(function(){
       $.ajax({
         url:your url,
         type: 'post',
         dataType: 'json', // or your choice of returned data
         success: function(states){
             $.each(states, function(i, stt){
                $('<option value="'+stt.name+'">'+stt.text+'</option>').appendTo('#states');
             });
         }
      });
      $('#states').empty();
   });

});
于 2013-02-02T11:59:22.707 に答える
0

非常に簡単です-あなたがしなければならないのは2つのドロップダウンを持っていることです。1つは州の完全なリストを含み、2番目の（空の）都市リストは1つの空白の無効なオプションのみを含みます。

状態ドロップダウンがイベントをトリガーするとすぐにchange、状態データを抽出し、AJAX呼び出しを介してサーバーまたはその状態の都市のリストを返すWebサービスに送信します。

次に、2番目のドロップダウンに返された都市の値を入力します。

于 2013-02-02T11:46:11.593 に答える