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

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

コードをコピーします。 コードは次のとおりです。 >

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

コードをコピーします。 🎜> コードは次のとおりです。 $(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 loadEmployeeCars(selectedItem) {
$.ajax({
type: "POST",
url: "Default.aspx/FetchEmployeeCars",
data : "{id: " selectedItem "} "、
contentType: "application/json; charset=utf-8"、
dataType: "json"、
async: true、
success: function Success(data) {
printEmployeeCars (data.d);
}
});

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


非常に簡単で、値が 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对您有帮助。