ရိုးရိုးဘာသာစကား
အသုံးချင်းနှင့်အသုံးပြုခြင်း
options
ရိုးရိုးအသုံးပြုခြင်း နိုင်ငံခြားဘာသာစကား အဖွဲ့အစည်း။
ဖော်ပြ:စုစုပေါင်းအရာများ သည် သတ္တုပုံအချင်း တွင် ပေါ်ထွက်လာသော အမှားမှ အစဥ်အမှားထိ ပြောင်းလဲပါ:
အကြောင်းကြောင်း
အကြောင်းကြောင်း 1
အဆင်းသုံးသုံးလျှက်အချင်း အချက်အလက် အရေအတွက် ကြည့်ပါ:
var x = document.getElementById("mySelect").options.length;
x 的结果将是:
4
အကြောင်းပြချက်:ပြုံးအောက်တွင် အကြောင်းကြောင်းများ ပြုပေးပါ:
စနစ်နည်း
selectObject.options
အချက်အလက်
အချက်အလက် | ဖော်ပြ |
---|---|
length |
အဖွဲ့အစည်းမှ <option> အချင်းများ၏ အရေအတွက် တုံ့ပြန်ပေးပါ: ဖော်ပြ:အချက်အလက် အား သာသာသာ တုံ့ပြန်ပေးပါ: |
selectedIndex | အဖွဲ့အစည်းမှ ရွေးချယ်ထားသော <option> အချင်းများ၏ အချိန်ချိန် (အစိတ်အစိတ် 0) ကို အစားထိုးသို့မဟုတ် တုံ့ပြန်ပေးပါ: |
စနစ်
စနစ် | ဖော်ပြ |
---|---|
[index] |
item( ဖော်ပြ:အချက်အလက် အမှတ်သား အား အဆင်းသတ်ထားခြင်း အတိုင်း တုံ့ပြန်ပေးပါ: |
[add(option[,index]] | add(option[, |
အဖွဲ့အစည်းမှ အချက်အလက် အချိန်ချိန် (အစိတ်အစိတ် 0) ကို ဖယ်ရှားပါ:index) |
item( ဖော်ပြ:အချက်အလက် အမှတ်သား အား အဆင်းသတ်ထားခြင်း အတိုင်း တုံ့ပြန်ပေးပါ: |
namedItem(id) |
အဖွဲ့အစည်းမှ အချက်အလက်ကို ဖယ်ရှားပါ: ဖော်ပြ:အချက်: id ရှိမရှိမသာ အမှတ်သား အား တုံ့ပြန်ပေးပါ: |
remove(index) | အဖွဲ့အစည်းမှ အချက်အလက်ကို ဖယ်ရှားပါ: |
နည်းပါးစွာ
DOM အဆင်း: | Core Level 2 Document Object |
---|---|
တုံ့ပြန်ပေးသော အချက်: |
HTMLOptionsCollection အဖွဲ့အစည်း သည် <select> အချင်းတွင် <option> အချင်းများအား ကိုယ်စားပြုပါ: စုစုပေါင်းအရာများ သည် သတ္တုပုံအချင်း တွင် ပေါ်ထွက်လာသော အမှားမှ အစဥ်အမှားထိ ပြောင်းလဲပါ: |
အကြောင်းကြောင်းများ
အကြောင်းအရာ 2: [index]
အဆင်းသုံးသုံးလျှက်အချင်း ပထမဆုံးရွက်ချက် (အချိန်ချိန် 0) တုံ့ပြန်ပေးပါ:
var x = document.getElementById("mySelect").options[0].text;
x 的结果将是:
Apple
အကြောင်းအရာ 3: item(index)
အဆင်းသုံးသုံးလျှက်အချင်း ပထမဆုံးရွက်ချက် (အချိန်ချိန် 0) တုံ့ပြန်ပေးပါ:
var x = document.getElementById("mySelect").options.item(0).text;
x 的结果将是:
Apple
အကြောင်းအရာ 4: namedItem(id)
အဆင်းသုံးသုံးလျှက်အချင်း id="orange" ရွက်ချက်ကို တုံ့ပြန်ပေးပါ:
var x = document.getElementById("mySelect").options.namedItem("orange").text;
x 的结果将是:
Orange
အကြောင်းအရာ 5
အဆင်းသုံးသုံးလျှက်အချင်း “1” အချိန်ချိန်တွင် “ခိုးဝါ” ရွက်ချက် ထပ်ထည့်ပါ:
var x = document.getElementById("mySelect"); var c = document.createElement("option"); c.text = "Kiwi"; x.options.add(c, 1);
例子 6
从下拉列表中删除索引为 “1” 的选项:
var x = document.getElementById("mySelect"); x.options.remove(1);例子 7
循环遍历下拉列表中的所有选项,并输出每个选项的文本:
var x = document.getElementById("mySelect"); var txt = ""; var i; for (i = 0; i < x.length; i++) { txt = txt + x.options[i].text + "
"; }
x 的结果将是:
Apple Orange Pineapple Banana
例子 8
在下拉列表中选择一个选项,并在 id="demo" 的元素中输出所选选项的文本:
var x = document.getElementById("mySelect"); var i = x.selectedIndex; document.getElementById("demo").innerHTML = x.options[i].text;
x 的结果将是:
Banana
例子 9
根据另一个下拉列表中的选定选项更改下拉列表中的选项:
var carsAndModels = {}; carsAndModels['VO'] = ['V70', 'XC60', 'XC90']; carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg']; carsAndModels['BMW'] = ['M6', 'X5', 'Z3']; function ChangeCarList() { var carList = document.getElementById("car"); var modelList = document.getElementById("carmodel"); var selCar = carList.options[carList.selectedIndex].value; while (modelList.options.length) { modelList.remove(0); } var cars = carsAndModels[selCar]; if (cars) { var i; for (i = 0; i < cars.length; i++) { var car = new Option(cars[i], i); modelList.options.add(car); } } }