1

次のjQueryを使用してカスケードドロップダウンを埋めています-

<script type="text/javascript">
    $(document).ready(function () {

  $("#ddlBrand1").change(function () {

  $.getJSON("URL", { id: idBrand },
        function (carModelData) {
            $("#ddlModel1").removeAttr('disabled');
            var select = $("#ddlModel1");
            select.empty();

            select.append($('<option/>', { value: '', text: "---Select Model---" }));
            $.each(carModelData, function (index, itemData) {
                select.append($('<option/>').val(itemData.Value).html(itemData.Text ));
            });
        });
  });

ドロップダウンを適切にバインドしますが、HTML が生成されないという問題があります。ビューソースを見ると、ドロップダウン値が利用できません。

選択したドロップダウン値をビューバッグに保持し、ポストバック後に依存ドロップダウンを再度埋めます。選択したドロップダウンをポストバック前と同じように設定しようとしていますが、機能していません。

4

2 に答える 2

1

代わりにoptions.append($("<option />").val(item.ImageFolderID).text(item.Name));次を使用します。

options.append($("<option />").val(item.ImageFolderID).html(item.Name));

ドロップダウン オプションに text() の代わりに html() を設定すると、生成されたソースに存在できるようになります。

編集

コレクションをクリアしたいのでselect、要素に対して jQuery 選択を再度実行する必要があります。変数に保存する代わりに (通常は役に立ちます)、変更を行った後に内容を更新する必要があります。

次のようなことをもっと試してみてください。

//Use this to clear the select & add the default first option:
$('#dd1Model1').find('option').remove().end().append('<option value="">---Select Model---</option>').val('');
//Use this to populate the select
$.each(carModelData, function(index, itemData) {
   $('#dd1Model1').append('<option value="' + itemData.Value + '">' + itemData.Text + '</option>').val(itemData.Value);
});
//Use this to select the first option by default
$('#dd1Model1 option:eq(0)').attr('selected', 'selected');
于 2012-12-11T05:44:02.853 に答える
0

ポール、あなたはこの関数をどこで呼んでいますか? これを document.ready 関数内で呼び出す必要があると思います。

また、選択した値でモデルをバインドする必要があります。html で利用できるようにします。ポストバックはありません。データを送信すると、セッション管理はありません。応答は、コントローラーから作成したモデルに基づく新しいページになります。

応答後またはポストバックでスクリプトが実行されていないと思われます。確認してください。ajax の読み込みまたはスクリプトが実行されていないため、html に値が含まれていません。指定したスクリプトが機能していることを確認してください。

ドキュメントを準備して質問を更新してください。

編集

$("#ddlBrand1").change(function () { //this will trigger only when ddlBrand1 changes

  $.getJSON("URL", { id: idBrand },
        function (carModelData) {
             // check this line of code executes ?
             // alert(carModelData) may expected to return some thing 
             //  other than null
            $("#ddlModel1").removeAttr('disabled');
              // makes ddlModel1 active
            var select = $("#ddlModel1");
            select.empty();
              // clears the items of #ddlModel1  
            select.append($('<option/>', { value: '', text: "---Select Model---" }));
              // adds new --Select-- (you can give value as 0)
            $.each(carModelData, function (index, itemData) {
                select.append($('<option/>').val(itemData.Value).html(itemData.Text ));
            });
             // this will loops the JSON result from the server and
                 adds the option (items)  
        });
  });

トラブルシューティングのテクニック

1.This function will call only when 'ddlBrand1' changes. For this to
    happen ddlBrand1 needs to have more than one option.
2. Check whether getJSON returns a proper value.
3. Verify the url,parameters and the result (here carModelData). Alert it.
4. Also verify the response from server is not null. 
       You need to verify the controller, action etc. An error occurred in controller
    also leads to same issue.
5. Refer this below  and add .error,.sucess,.complete

jQuery 1.5 の Promise インターフェースでは、$.getJSON() を含む jQuery の Ajax メソッドを使用して、複数の .success()、.complete()、および .error() コールバックを単一のリクエストで連鎖させたり、後でこれらのコールバックを割り当てたりすることもできます。リクエストが完了した可能性があります。リクエストがすでに完了している場合は、コールバックがすぐに開始されます。ここをクリックURL

于 2012-12-11T05:42:00.367 に答える