Pemahaman asas dan penggunaan HTML select option_HTML/Xhtml_Web page production

Penjelasan terperinci tentang HTML (pilihan pilihan) dalam javascript
1 Pemahaman asas:

Salin kod

Kodnya adalah seperti berikut:

var e = document.getElementById("selectId");e 🎜>//Buat objek pilihan, iaitu, cipta satu atau lebih teks
//pilihan ialah tatasusunan, yang boleh menyimpan berbilang teg value="value">Teks --Length attribute
selectedIndex attribute--------Nilai indeks teks dalam kotak yang dipilih pada masa ini Nilai indeks ini diperuntukkan secara automatik oleh memori (0,1,2,3...) sepadan dengan (No. Satu nilai teks, nilai teks kedua, nilai teks ketiga, nilai teks keempat...)
2: Atribut satu pilihan (---obj.options[ obj.selecedIndex] ialah < yang ditentukan ;option> teg, iaitu ---)
atribut teks---------kembali/nyatakan teks

atribut nilai------ Kembalikan/nyatakan nilai, selaras dengan < ;nilai pilihan="...">.
atribut indeks-------mengembalikan subskrip,
atribut terpilih-------mengembalikan/menentukan sama ada objek dipilih Dengan menyatakan benar atau salah, item yang dipilih boleh ditukar secara dinamik
defaultSelected attribute-----Mengembalikan sama ada objek dipilih secara lalai. benar/salah.
3: kaedah pilihan
Tambah teg -----obj.options.add(new("text","value")); ;option> label-----obj.options.remove(obj.selectedIndex)
Dapatkan teks teks
Ubah suai nilai teg >Padamkan semua teg -----obj.options.length = 0
Dapatkan nilai teg -----obj.options[obj.selectedIndex].nilai
Nota:
a: Kaedah di atas ditulis seperti kaedah obj.options.function() jenis ini dan bukannya obj.funciton, kerana ia adalah untuk mempertimbangkan keserasian di bawah IE dan FF, seperti obj.add () ialah hanya sah dalam IE.
b: Pilihan dalam obj.option tidak perlu menggunakan huruf besar, dan pilihan dalam Opsyen baharu perlu menggunakan huruf besar

2. Aplikasi






Salin kod
Kodnya adalah seperti berikut:

< bahasa skrip="javascript"> nombor fungsi(){ var obj = document.getElementById("mySelect"); new Option("my "My eat", "4"); //Tukar nilai yang sedang dipilih //obj.options.add(new Option("My eat", "4")); dan kemudian tambah Pilihan

//alert(obj.selectedIndex);//memaparkan nombor siri, pilihan ditetapkan dengan sendirinya

//obj.options[obj.selectedIndex].text = "Makanan saya"; tukar nilai

//obj.remove(obj.selectedIndex);Padam fungsi
}

pilih id=" mySelect">
Beg saya Beban saya





1 Buat pilihan secara dinamik


Kodnya adalah seperti berikut:


fungsi createSelect(){
var mySelect = document.createElement("select"); = "mySelect";
document.body.appendChild(mySelect);
Salin kod


Kod adalah seperti berikut:

fungsi addOption(){
//Cari objek berdasarkan id,
var obj = document.getElementById('mySelect');
//Tambah pilihan

obj.add(new Option("text","value")); //Ini hanya sah dalam IE

obj .options.add(new Option("text","value")); //Ini serasi dengan IE dan firefox }
3. Padam semua pilihan pilihan

Salin kod

Kodnya adalah seperti berikut:

fungsi removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0; pilihan pilihan

Salin kod

Kod adalah seperti berikut: fungsi removeOne( ){

var obj=document.getElementById('mySelect');

//index, nombor siri pilihan yang akan dipadamkan, di sini ambil nombor siri pilihan yang sedang dipilih

var index= obj.selectedIndex;
obj.options.remove( index);
}


5. >
Salin kod

Kodnya adalah seperti berikut:

var obj=document.getElementById('mySelect'); selectedIndex; //Nombor siri, ambil nombor siri pilihan yang sedang dipilih

var val = obj.options[index].value; 6 >

Salin kod


Kod tersebut adalah seperti berikut:

var obj=document.getElementById(' mySelect');
var index=obj.selectedIndex; //Nombor siri, ambil nombor siri pilihan yang sedang dipilih

var val = obj.options[index].text

7. Ubah suai pilihan

Salin kod


Kodnya adalah seperti berikut:

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //Nombor siri, ambil pilihan yang sedang dipilih Nombor siri

var val = obj.options[index]=new Pilihan("teks baharu","nilai baharu");

8 Padam pilih

Salin kod
<.>
Kodnya adalah seperti berikut:

fungsi removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

change="choice()">

根据这些东西,自己用JQEURY AJAX JSON实现了一个小功能如下:
康下下:
JS:(店代窠代码)

复制代码

代码如下:

/**
* @description 構件聯動下拉清單(用JQUERY 的AJAX配合JSON實作)
* @prarm selectId 下拉清單的ID
* @prarm method 要呼叫的方法名稱
* @prarm tempage>* @prarm method 要呼叫的方法名稱
* @prarm temp處存放軟體ID
* @prarm url 要跳轉的位址
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//使用get方法存取後台
dataType: "json",//回傳json格式的資料
url: url,//要存取的後台位址
data: "method=" method "&temp=" temp, //要傳送的資料
success: function(msg){//msg為傳回的數據，在這裡做資料綁定
var data = msg.lists;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description 將JSON資料轉換成HTML資料格式
* @prarm selectId 下拉清單的ID
* @prarm nodeArray 傳回的JSON陣列
*
*/
function coverJsonToHtml(selectId,nodeArray){
//get select
var Select=$ j("#" selectId);
//clear select value
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i//create select Option
tempOption= $j('' nodeArray[i].mc ' ' );
//put Option to select
tempSelect.append(tempOption);
}
// 取得退化構件清單
getCpgjThgl(selectId,'thgjDm');
getCpgjThgl(selectId,'thgjDm');
/**
* @description 清空下拉清單的值
* @prarm selectId 下拉清單的ID
* @prarm index 開始清空的下標位置
*/
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(length!=index){
//長度是在變化的，因為必須重新取得
length=document.getElementById(selectId).options.length;
for(var i=index;i document.getElementById(selectId).options.remove(i);
length=length/2;
}
}
/**
* @description 取得退化構件清單
* @prarm selectId1 引用軟體下拉清單的ID
* @prarm selectId2 退化構件下拉清單的ID
*/
function getCpgjglse( selectId2){
var obj1=document.getElementById(selectId1);//引用軟體下拉清單
var obj2=document.getElementById(selectId2);//退化構件下拉清單
var oplentions .length;
//當引用軟體列表長度等於1時返回，不做操作
if(len==1){
return false;
}
//清空下拉列表的值，兩種方式都可以
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;ivar option= obj1.options[i];
//引用軟體被選取項目不加入
if(i!=obj1.selectedIndex){
//克隆OPTION並加入到SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}

HTML代碼:

HTML代碼: 複製代碼

代碼如下:

*引用軟體：	onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm' 'linkageTree','1');" value="選擇...">
*引用分版：
退化構件：	無