Jquery はリフレッシュ不要の DropDownList 連携実装 code_jquery

まず HTML を見てみましょう。Jquery を引用して 2 つの DropDownList を配置します。

コードをコピーします。 コードは次のとおりです。 > #ddlEmployeeCars { position:absolute; left:9px; }

次に、コア スクリプトを記述します:

コードをコピーします。 🎜> コードは次のとおりです。 $(function() { var $ddl = $(" select[name$=ddlEmployee]"); var $ddlCars = $("select[name$=ddlEmployeeCars]"); $ddl.focus(); 🎜>$ddl.bind("change keyup", function() { if ($(this).val() != "0") { loadEmployeeCars($("選択オプション:選択済み") .val()); $ddlCars.fadeIn("遅い"); $ddlCars.fadeOut("遅い"); >});

function printEmployeeCars(data) { $("select[name] $=ddlEmployeeCars] > option") .remove(); for (var i = 0; i $("select[name$=ddlEmployeeCars]")。 append( $("&lt ;option> ").val(data[i].Id).html(data[i].Car) } } </script&gt ;

非常に簡単で、値が 0 であるかどうかを確認し、成功したら、元のオプションを削除して、その値をサーバーに渡します。新しいオプション。 Web ページのコードを確認します。

コードをコピーします。

コードは次のとおりです。

public 部分クラス _Default: System.Web.UI.Page { [WebMethod] public static List FetchEmployeeCars(int id) { var emp = new EmployeeCar(); return emp.FetchEmployeeCars(id); } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { var 従業員 = new Employee(); ddlEmployee.DataSource = "姓"; ddlEmployee.DataValueField = "ID"; >ddlEmployee.DataBind(); } } }

データソース クラス:

コードをコピー

コードは次のとおりです: public class EmployeeCar { public int Id { get;セット; パブリック文字列 Car { get;セット;

プライベート静的リスト LoadData() { 新しいリストを返す { new EmployeeCar {Id = 1, Car = "Ford"}, new EmployeeCar {Id = 1, Car = "Holden"}, new EmployeeCar {Id = 1, Car = "Honda"}、 new EmployeeCar {Id = 2, Car = "Toyota"}、 new EmployeeCar {Id = 2、Car = "General Motors"}、 new EmployeeCar {Id = 2, Car = "Volvo"}、 new EmployeeCar {Id = 3、Car = "Ferrari"}、 new EmployeeCar {Id = 3、Car = "Porsche"}、 new EmployeeCar {Id = 3 、車 = "Ford2"} }; }

公開リスト FetchEmployeeCars(int id) { return (from p in LoadData() where p.Id == id select p).ToList(); } }

public クラス Employee { public int Id { get;セット; パブリック文字列 GivenName { get;セット; } パブリック文字列姓 { get;セット; }

公開リスト FetchEmployees() { 新しいリストを返す { 新入社員 {Id = 1、GivenName = "Tom"、Surname = "Hanks"}、 新入社員 {Id = 2、GivenName = "Hugh"、Surname = "Jackman"}、 新入社員 {ID = 3、GivenName = "Petter"、Surname = "Liu"} }; }

公務員 FetchEmployee(int id) { var 従業員 = FetchEmployees(); return (従業員の p から where p.Id == id select p).First(); } } 完了。希望この篇POST对您有帮助。