Penjelasan terperinci tentang penggunaan satu pilihan dan berbilang pilihan bagi teg pilihan dalam HTML_HTML/Xhtml_Pengeluaran halaman web

Elemen pilih mencipta menu pilihan tunggal atau berbilang pilihan. Apabila borang diserahkan, penyemak imbas menyerahkan item yang dipilih atau mengumpulkan berbilang pilihan yang dipisahkan koma, menggabungkannya ke dalam senarai parameter tunggal dan menyertakan atribut nama apabila menyerahkan data borang

1. Penggunaan asas:

Salin kod

Kodnya adalah seperti berikut:

Volvo nilai pilihan= "opel">Opel
Audi
boleh ditinggalkan dan digunakan dalam halaman

Salin kod

Kodnya adalah seperti berikut : SemuaPusat Pembelajaran Dalam Talian Universiti Hubei TVPusat Pembelajaran Dalam Talian Universiti Normal Chengdu

Kolej Vokasional dan Teknikal Wuhan Pusat Pembelajaran Dalam Talian


2. Elemen Select juga boleh digunakan untuk berbilang pilihan, lihat kod berikut:

Salin kod

Kod adalah seperti berikut: //Dengan berbilang atribut, anda boleh memilih beberapa kali

Sekolah Menengah Kolej< ;/option>

Ph.D.< ;/option> Sekolah Tinggi
Kolej
Ph.D.< ;/option>

di mana atribut saiz ditetapkan Jika saiz = 3, maka tiga keping data akan dipaparkan. Ambil perhatian bahawa berbilang pilihan tidak dibenarkan.

Sekolah rendah
Sekolah rendah
Sekolah menengah
Sekolah menengah teknikalKolej Pelajar lepasan
Ph.D.
Felo pascadoktoral Sila pilih
Tentukan pilihan pilih Sama ada terdapat Item dengan nilai yang ditentukan dalam





Salin kod


Kod adalah seperti berikut:


@param objSelectId Id komponen pilih sasaran untuk disahkan
@param objItemValue Nilai yang perlu disahkan untuk kewujudan
fungsi isSelectItemExit(objSelectId,objItemValue) { objItemValue = document.getElementById(objSelectId);

var isExit = false;
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;iif( objSelect.options[i].value == objItemValue) {
isExit = true;
}

}

} return isExit; }

2 Tambahkan Item pada pilihan pilih

Salin kod <.>

Kodnya adalah seperti berikut:

@param objSelectId Id komponen pilih sasaran untuk ditambahkan pada item
@param objItemText Kandungan item yang akan ditambah
@param objItemValue Nilai item yang akan ditambah
fungsi addOneItemToSelect(objSelectId ,objItemText,objItemValue) {
var objSelect = document.getElementById(objSelectId); //Tentukan sama ada nilai adalah item sudah wujud dalam select
if(isSelectItemExit(objSelectId,objItemValue)) {
$.messager.alert('Prompt message','Pilihan dengan nilai ini sudah wujud!' ,'info');
} else {
var varItem = new Option(objItemText,objItemValue);


3 Padamkan item yang dipilih daripada pilihan pilih, menyokong berbilang pilihan dan berbilang pemadaman

Salin kod

Kod adalah seperti berikut:

@param objSelectId Id komponen pilih sasaran untuk dipadamkan fungsi removeSelectItemsFromSelect(objSelectId) { var objSelect = document. (objSelectId);

var delNum = 0;

if (null != objSelect && typeof(objSelect) != "undefined") {

for(var i=0;iif(objSelect .options[i].selected) {
objSelect.options.remove(i);delNum = delNum 1; ;
}
}
jika (delNum <= 0 ) {
$.messager.alert('Mesej', 'Sila pilih pilihan yang ingin anda padamkan!', 'info') ;
} lain {
$.messager .alert('pilihan mesej gesaan',''delNum' berjaya dipadamkan!','info');
}
}
}


4 Dari pilih Padam Item mengikut nilai yang ditentukan dalam pilihan





Salin kod

Kod adalah seperti berikut:

@param objSelectId Id komponen pilih sasaran untuk disahkan @param objItemValue Nilai yang akan disahkan untuk kewujudan fungsi removeItemFromSelectByItemVa objSelectId,objItemValue) { var objSelect = document.getElementById(objSelectId); jika (null != objSelect && typeof(objSelect) != "undefined") { //Tentukan sama ada ia wujud; >if(isSelectItemExit(objSelect,objItemValue)) {

for(var i=0;i< ;objSelect.options.length;i ) {

if(objSelect.options[i].value == objItemValue) {

objSelect.options.remove(i);
break;
}
}
$.messager.alert('Mesej','Berjaya dipadamkan!','info'); 🎜>} lain {
$.messager.alert('Mesej','Tidak Terdapat pilihan dengan nilai yang ditentukan!','info');
}
}
}


5. Kosongkan semua pilihan dalam pilihan





Salin kod


Kodnya adalah seperti berikut:

@param objSelectId Id komponen pilih sasaran untuk dikosongkan
fungsi clearSelect( objSelectId) {

var objSelect = document.getElementById(objSelectId(objSelectId); (objSelect) != "undefined") {

for(var i=0;iobjSelect.options.remove(i); }

6 Dapatkan semua item dalam pilihan, dan Pasang semua nilai ke dalam rentetan, dipisahkan dengan koma

Salin kod


Kod adalah seperti berikut:


@param objSelectId target pilih id komponen

@kembali nilai semua item dalam pilih, dipisahkan dengan koma
fungsi getAllItemValuesByString(objSelectId) {
var selectItemsValuesStr = ""; ) != "undefined") {
var length = objSelect.options.length

for(var i = 0; i < length; i = i 1) {

if (0 == i) { selectItemsValuesStr = objSelect.options[i].value; } else { selectItemsValuesStr = selectItemsValuesStr "," objSelect.options[i].value } kembali selectItemsValuesStr;

}

7 Alihkan semua pilihan yang dipilih dalam satu pilihan ke pilihan yang lain





Salin kod


Kod adalah seperti berikut :

@param fromObjSelectId Id komponen pilih asal bagi item yang dialihkan
@param toObjectSelectId Id komponen pilih sasaran yang akan dimasukkan oleh item yang dialihkan
function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId)> {var🎜 objSelect = document. getElementById(fromObjSelectId);
var delNum = 0; objSelect.options. length;i=i 1) {
if(objSelect.options[i].selected) {
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i]. nilai)
objSelect.options.remove(i);
i = i - 1;
}
}
}
}


8. Alihkan semua pilihan ke pilihan lain

Salin kod

Kodnya adalah seperti berikut:

@param fromObjSelectId Id komponen pilih asal item yang dialihkan

@param toObjectSelectId Id komponen pilih sasaran yang akan dimasukkan oleh item yang dialihkan

fungsi moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSElementBelect = document. (dariObjSelectId);
if (null != objSelect) {
for(var i=0;iaddOneItemToSelect(toObjectSelectId,objSelect.options[options. i].teks ,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
}

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn