Pemahaman dasar:
var e = document.getElementById("selectId");
e.pilihan= Opsi baru("teks","nilai");
//Buat objek opsi, yaitu, buat satu atau lebih <option value="value">teks</option> di tag <select>
//options adalah sebuah array, yang dapat menyimpan banyak tag seperti <option value="value">text</option>
1: Properti array opsi[ ]:
atribut panjang---------atribut panjang
Atribut indeks yang dipilih--------Nilai indeks teks dalam kotak yang saat ini dipilih. Nilai indeks ini secara otomatis dialokasikan oleh memori (0,1,2,3...) yang sesuai dengan (nilai teks pertama , nilai teks kedua, nilai teks ketiga, nilai teks keempat...)
2: Atribut dari satu opsi (---obj.options[obj.selecedIndex] adalah tag <option> yang ditentukan, yaitu ---)
atribut teks--------- mengembalikan/menentukan teks
atribut nilai------Mengembalikan/menentukan nilai, konsisten dengan <options value="...">.
atribut indeks------- mengembalikan subskrip,
atribut yang dipilih ------- Mengembalikan/menentukan apakah objek dipilih dengan menentukan benar atau salah, item yang dipilih dapat diubah secara dinamis
atribut defaultSelected----- Mengembalikan apakah objek dipilih secara default. benar/salah.
3: metode pilihan
Tambahkan tag <option>-----obj.options.add(new("text","value"));<add>
Hapus tag <option>-----obj.options.remove(obj.selectedIndex)<delete>
Dapatkan teks dari tag <option>-----obj.options[obj.selectedIndex].text<check>
Ubah nilai tag <option>-----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
Hapus semua tag <option>-----obj.options.length = 0
Dapatkan nilai tag <option>-----obj.options[obj.selectedIndex].value
Melihat:
a: Metode di atas ditulis seperti metode jenis ini obj.options.function() bukan obj.funciton, karena untuk mempertimbangkan kompatibilitas di IE dan FF, misalnya obj.add() hanya valid di IE .
b: Opsi pada opsi keberatan tidak perlu dikapitalisasi, dan Opsi pada Opsi baru perlu dikapitalisasi.
Dua aplikasi
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<skrip bahasa="javascript">
nomor fungsi(){
var obj = document.getElementById("Pilihansaya");
//obj.options[obj.selectedIndex] = new Option("My Eat","4");//Ubah nilai yang dipilih saat ini
//obj.options.add(new Option("Makanan saya","4"));Tambahkan opsi lain
//alert(obj.selectedIndex);//menampilkan nomor seri, opsi diatur dengan sendirinya
//obj.options[obj.selectedIndex].text = "Makanan saya";
//obj.remove(obj.selectedIndex); fungsi hapus
}
</skrip>
</kepala>
<tubuh>
<pilih id="Pilihansaya">
<option>Tas saya</option>
<option>Buku catatan saya</option>
<option>Minyak Saya</option>
<option>Beban saya</option>
</pilih>
<input type="button" name="button" value="Lihat hasil" onclick="number();">
</tubuh>
</html>
Berdasarkan hal-hal ini, saya mengimplementasikan fungsi kecil menggunakan JQEURY AJAX+JSON sebagai berikut:
Kode JS: (hanya kode yang berhubungan dengan SELECT yang diambil)
Copy kode kodenya sebagai berikut:
/**
* @description Daftar drop-down tautan komponen (diimplementasikan menggunakan AJAX dan JSON JQUERY)
* @prarm selectId ID dari daftar drop-down
* @prarm method Nama metode yang akan dipanggil
* @prarm temp ID perangkat lunak disimpan di sini
* @prarm url Alamat tujuan lompat
*/
fungsi linkAgeJson(selectId,metode,temp,url){
$j.ajax({
ketik: "get",//Gunakan metode get untuk mengakses latar belakang
dataType: "json",//Mengembalikan data dalam format json
url: url,//Alamat backend yang akan diakses
data: "method=" + method+"&temp="+temp,//Data yang akan dikirim
sukses: function(msg){//msg adalah data yang dikembalikan, pengikatan data dilakukan di sini
var data = pesan.daftar;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @deskripsi Ubah data JSON menjadi format data HTML
* @prarm selectId ID dari daftar drop-down
* @prarm nodeArray mengembalikan array JSON
*
*/
fungsi coverJsonToHtml(selectId,nodeArray){
//dapatkan pilihan
var tempSelect=$j("#"+selectId);
//hapus nilai pilihan
isClearSelect(pilihId,'0');
var tempOption=null;
for(var i=0;i<nodeArray.length;i++){
//buat opsi pilihan
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//letakkan opsi untuk dipilih
tempSelect.append(tempOption);
}
// Dapatkan daftar komponen yang terdegradasi
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Hapus nilai daftar drop-down
* @prarm selectId ID dari daftar drop-down
* @prarm index Posisi indeks dimana kliring dimulai
*/
fungsi isClearSelect(selectId,indeks){
var length=document.getElementById(selectId).options.length;
while(panjang!=indeks){
//Panjangnya berubah karena harus diperoleh kembali
length=document.getElementById(selectId).options.length;
untuk(var i=indeks;i<panjang;i++)
document.getElementById(selectId).options.remove(i);
panjang=panjang/2;
}
}
/**
* @description Dapatkan daftar komponen yang terdegradasi
* @prarm selectId1 mengacu pada ID daftar drop-down perangkat lunak
* @prarm selectId2 ID dari daftar drop-down komponen yang mengalami degenerasi
*/
fungsi getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1);//Daftar drop-down perangkat lunak referensi
var obj2=document.getElementById(selectId2);//Degenerasi daftar drop-down komponen
var len=obj1.options.length;
//Ketika panjang daftar perangkat lunak yang direferensikan sama dengan 1, daftar tersebut dikembalikan dan tidak ada operasi yang dilakukan.
jika(len==1){
kembali salah;
}
//Hapus nilai daftar drop-down, kedua metode tersedia
// isClearSelect(pilihId2,'1');
dokumen.getElementById(selectId2).length=1;
untuk(var i=0;i<len; i++){
var pilihan= obj1.pilihan[i];
//Item terpilih yang direferensikan oleh perangkat lunak tidak ditambahkan
if(i!=obj1.selectedIndex){
//Kloning OPSI dan tambahkan ke SELECT
obj2.appendChild(option.cloneNode(benar));
}
}
}
Kode HTML:
Copy kode kodenya sebagai berikut:
<TABLE border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td> <span>*</span>Perangkat lunak penawaran harga:</td>
<td>
<input nama="yyrjMc" id="yyrjMc" type="teks" tabindex="3" size="30" >
<masukan nama="yyrjDm" id="yyrjDm" type="tersembunyi" >
<tipe masukan="tombol"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Pilih...">
</td>
</tr>
<tr>
<td> <span>*</span>Versi kutipan:</td>
<td id="yyfb">
<pilih nama="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</pilih>
</td>
</tr>
<tr>
<td>Degenerasi komponen:</td>
<td id="thgj">
<pilih nama="thgjDm" id="thgjDm">
<option value="-1" dipilih>Tidak ada</option>
</pilih>
</td>
</tr>
</TABEL>