ドロップダウンリスト（asp.net mvc）をカスケード接続するための汎用jquery関数

Question

医療予約システムで作業しています。カスケードドロップダウンリストの項目をフィルタリングするためにjquery関数を使用しています。同じことを何度も書くのではなく、すべてのドロップダウンリストを処理するための「ジェネリック」を書く方法はありますか？

$(document).ready(function() { 
 
      $('#ddlIl').change(function() { 
 
       $.ajax({ 
 
        type: "post", 
 
        url: "/Users/GetIlce", 
 
        data: { Id: $('#ddlIl').val() }, 
 
        datatype: "json", 
 
        traditional: true, 
 
        success: function (data) { 
 
         var ilce = "<select id='ddlIlce'>"; 
 
         ilce = ilce + '<option value="">--Seçin--</option>'; 
 
         for (var i = 0; i < data.length; i++) { 
 
          ilce = ilce + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>'; 
 
         } 
 
         ilce = ilce + '</select>'; 
 
         $('#ddlIlce').html(ilce); 
 
        } 
 
       }); 
 
      }); 
 
     });

私は、次のdropdownlists持っている：あなたはビュー内のすべてのdropdownlistsを提供する機能でAJAX呼び出しをラップしたい場合は州、市、省、病院、医師

Answer 1

をおそらく以下のコードが適用されます：

/* 
* @param url = URL to fetch data (i.e. controller action method 
*    returning IEnumerable<SelectListItem> or SelectList) 
* @param source = source dropdownlist name 
* @param target = target dropdownlist name 
*/ 
function cascadeDropDownList(url, source, target) { 
    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: { Id: $('#' + source).val() }, 
     dataType: 'json', 
     traditional: true, 
     success: function (data) { 
      // remove previous option contents first 
      $('#' + target + ' option').each(function() { 
       $(this).remove(); 
      }); 

      // add new option contents 
      var options = '<option value="">--Seçin--</option>'; 
      for (var i = 0; i < data.length; i++) { 
       options += '<option value=' + data[i].Value + '>' + data[i].Text + '</option>'; 
      } 
      $('#' + target).html(options); 
     } 
    }); 
} 

changeのイベントでの使用：

$(document).ready(function() { 
    $('#ddlIl').change(function() { 
     var url = '/Users/GetIlce'; // recommended: '@Url.Action("GetIlce", "Users")' 
     var source = $(this).attr('id'); 
     cascadeDropDownList(url, source, 'ddlIlce'); 
    }); 
}); 

NB：上記の機能はすでにビューページで作成され、あなただけのselect要素を再作成せずに、オプション要素の値を挿入するたドロップダウンリストのターゲットを想定しています。あなたが代わりに新しいターゲットドロップダウンリストを作成したい場合は、機能下記のように変更します。

/* 
* @param url = URL to fetch data (i.e. controller action method 
*    returning IEnumerable<SelectListItem> or SelectList) 
* @param source = source dropdownlist name 
* @param target = target element (e.g. div) 
* @param ddlName = target dropdownlist name 
*/ 
function cascadeDropDownList(url, source, target, ddlName) { 
    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: { Id: $('#' + source).val() }, 
     dataType: 'json', 
     traditional: true, 
     success: function (data) { 
      var ddl = "<select id='" + ddlName + "'>"; 
      ddl += '<option value="">--Seçin--</option>'; 
      for (var i = 0; i < data.length; i++) { 
       ddl += '<option value=' + data[i].Value + '>' + data[i].Text + '</option>'; 
      } 
      ddl += '</select>'; 
      $('#' + target).html(ddl); 
     } 
    }); 
} 

使用法：

$(document).ready(function() { 
    $('#ddlIl').change(function() { 
     var url = '/Users/GetIlce'; // recommended: '@Url.Action("GetIlce", "Users")' 
     var source = $(this).attr('id'); 
     var target = $('#targetdiv').attr('id'); 
     cascadeDropDownList(url, source, target, 'ddlIlce'); 
    }); 
}); 

の作業例：.NET Fiddle