Rumah > hujung hadapan web > html tutorial > Penjelasan terperinci tentang penggunaan satu pilihan dan berbilang pilihan bagi teg pilihan dalam HTML_HTML/Xhtml_Pengeluaran halaman web

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

WBOY
Lepaskan: 2016-05-16 16:37:42
asal
2308 orang telah melayarinya

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 : 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;
}
}
}

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan