Kawalan pelayan dinamik Javascript contoh_kemahiran javascript

Baru-baru ini, banyak halaman perlu memuatkan beberapa kotak senarai lungsur untuk dipilih oleh pengguna Pada asalnya, aplikasi telah dimuatkan di bahagian pelayan. Akhir sekali, disebabkan pertimbangan logik perniagaan, beberapa fungsi DropDownList perlu dilaksanakan pada bahagian klien. Kini fungsi senarai juntai bawah terasa lebih baik untuk digunakan daripada meletakkan semuanya di sebelah pelayan.

Kaedah khusus:

Letakkan kawalan DropDownList dalam halaman dan tambahkan item untuk menganalisis kod HTML yang dijana dengan cara ini, apabila menggunakan js untuk kawalan dinamik, kod ujian adalah seperti berikut:

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
</asp:DropDownList>

Lihat dalam penyemak imbas dan analisis Html: Berikut ialah kod HTML yang dijana oleh kawalan DropDownList. Ia tidak sama dengan pilihan biasa

Ada perbezaan. Kemudian anda boleh mengisi, memadam, memilih dan kawalan lain secara dinamik melalui js.

<select name="DropDownList1" id="DropDownList1">
<option value="1">1</option>
</select>

Anda boleh memadam 1 dan kini menambah dua kawalan butang HTML untuk menambah pilihan dan memadam semua pilihan masing-masing. Kod sumber butang adalah seperti berikut:

<input id="Button1" type="button" value="添加Option" onclick="addOption()" />

<input id="Button2" type="button" value="全部删除Option" onclick="delOption()" />

Menambah dan mengalih keluar fungsi kelihatan seperti ini:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的，之后在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");

var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}

}

function delOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE两种均支持
}
}

Dilihat dalam penyemak imbas, anda boleh membuat pilihan lungsur turun terpilih dengan mudah, dan memandangkan ini adalah yang dijana oleh pelanggan, ia lebih cekap daripada pelayan

Kod untuk kerja sampingan. Tetapi pada masa ini, jika anda ingin menggunakan DropDownList1.SelectedValue untuk mendapatkan pilihan yang dipilih oleh pengguna, maka anda perlu

Ralat telah berlaku. Ini kerana DropDownList ditambah secara dinamik oleh JS, oleh itu, itemnya bukan milik ViewState dan tidak dikekalkan,

Ini bermakna kami tidak boleh mengendalikannya di bahagian pelayan. Untuk menyelesaikan masalah ini, dua kaedah boleh digunakan: 1. Hidden control saving

Kaedah pilihan pengguna; 2. Kaedah Request.Borang. (Lihat msdn Taste of Ajax)

1. Kami menambah kawalan Tersembunyi pada halaman dan menggunakannya untuk menyimpan maklumat tentang pilihan DropDownList berubah, supaya rasa pemilihan pengguna

Selepas menerima maklumat yang diminati, kami boleh mendapatkan maklumat di bahagian pelayan dan memprosesnya untuk merealisasikan pembahagian kerja secara munasabah antara pelanggan dan perkhidmatan.

Tambah acara onchange pada kawalan DropDownList Pada masa ini, kod htmlnya adalah seperti berikut:

<asp:DropDownList ID="DropDownList1" runat="server" onchange="ResvItem()">
</asp:DropDownList>

Peristiwa

Onchange adalah seperti berikut Peristiwa ini menyimpan nilai yang dipilih oleh pengguna:

function ResvItem(){
var objDdl = document.getElementById("DropDownList1");
document.getElementById("HiddenField1").value = objDdl.options[objDdl.selectedIndex].value;
}

Selepas ini, kami menggunakan kawalan asp:button untuk menguji keputusan:

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}

Pada ketika ini, semua kerja telah selesai, tetapi masih terdapat masalah Acara perubahan DropDownList hanya boleh digunakan apabila pengguna menukar pilihan lungsur turun

Ia hanya akan dicetuskan apabila

dipilih. Oleh itu, apabila pengguna menyerahkan dengan pilihan lalai, mereka mendapat nilai nol. Jadi kita boleh mengisi pilihan, iaitu,

pemulaan tersembunyi. Tambahkan baris kod pada acara addOption seperti berikut:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的，之后在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");
var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}
document.getElementById("HiddenField1").value = optValue[0];
}

Walau bagaimanapun, bahagian merah di atas tidak berjaya dalam ADD di bawah penyemak imbas TT Saya belum mencubanya dalam penyemak imbas lain. Berikut adalah cara lain untuk menulisnya:

function GetDeptList()
{
var ddlCityType = document.getElementById("ddlCityType");
var ddlPosition = document.getElementById("ddlPosition");
var v = ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);

var DeptList=Guest_UserRegister.GetDeptList(v.value).value;

var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddlPosition.insertBefore(opt, ddlPosition.firstChild);
}
}
}
function DelOption()
{
var ddluserSchool = document.getElementById("ddluserSchool");
var num=ddluserSchool.length;
while(num>0)
{
for(var j=0;j<num;j++)
{
ddluserSchool.remove(j);
}
num=ddluserSchool.length;
}

}
function GetSchoolList()
{
DelOption();
var ddlProvince = document.getElementById("ddlProvince");
var ddluserSchool = document.getElementById("ddluserSchool");
var v = ddlProvince.options[ddlProvince.selectedIndex];
var DeptList=Guest_UserRegister.GetSchoolList(v.value).value;
var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddluserSchool.insertBefore(opt, ddluserSchool.firstChild);
}
}
}