ຄູ່ມື Select options
ການສະແດງແລະການນຳໃຊ້
options ການຄົ້ນຫາທັງໝົດຂອງຄູ່ມື ແຕ່ລະປະເພດ ຂອງອົງການ.
ຄວາມຄິດເຫັນ:ພັນທະສານຂອງອົງການສະແດງທີ່ມາຈາກລາຍການຂອງລາຍການຄັດເລືອກ:
ຄວາມລາຍງາຍ
ຕົວຢ່າງ 1
ການເບິ່ງຈຳນວນຄະນະເລືອກທີ່ມີໃນລາຍການຄັດເລືອກສະເພາະ:
var x = document.getElementById("mySelect").options.length;
ຜົນຂອງ x ຈະເປັນ:
4
ຄຳແນະນຳ:ມີຕົວຢ່າງອື່ນໆຢູ່ດ້ານລຸ່ມຂອງໜ້າ.
ຂອບຂໍ້ຄວາມ:
selectObject.options
ບັນດາລັກສະນະ
| ບັນດາລັກສະນະ | ການອະທິບາຍ |
|---|---|
| length |
ຈຳນວນ <option> ຂອງອົງການສະແດງ: ຄວາມຄິດເຫັນ:ຄວາມຈະເປັນພຽງພົບຂອງບັນດາລັກສະນະນັ້ນ |
| selectedIndex | ການຕັ້ງຕັດຫຼືກັບຄືນບັນຫາຂອງ <option> ທີ່ຖືກເລືອກໃນອົງການສະແດງ (ເລີ່ມຈາກ 0): |
ວິທີການ
| ວິທີການ | ການອະທິບາຍ |
|---|---|
| [index] |
ການເອົາອົງການ <option> ທີ່ມີບັນຫາທີ່ກໍານົດມາຈາກອົງການສະແດງ (ເລີ່ມຈາກ 0): ຄວາມຄິດເຫັນ:ຖ້າບັນຫາທີ່ກໍານົດມາຈະຫຼາຍກວ່າຈຳນວນບັນຫາຈະກັບຄືນ null. |
| [add(option[,index)] | ການເພີ່ມອົງການ <option> ສູນກາງອົງການສະແດງທີ່ມີບັນຫາທີ່ກໍານົດມາ. ຖ້າບໍ່ມີບັນຫາຈະເພີ່ມຢູ່ທີ່ສຸດຂອງອົງການສະແດງ. |
| item(index) |
ການເອົາອົງການ <option> ທີ່ມີບັນຫາທີ່ກໍານົດມາຈາກອົງການສະແດງ (ເລີ່ມຈາກ 0): ຄວາມຄິດເຫັນ:ຖ້າບັນຫາທີ່ກໍານົດມາຈະຫຼາຍກວ່າຈຳນວນບັນຫາຈະກັບຄືນ null. |
| namedItem(id) |
ການເອົາອົງການ <option> ທີ່ມີ ID ທີ່ກໍານົດມາຈາກອົງການສະແດງ: ຄວາມຄິດເຫັນ:ຖ້າ: id ຖ້າບໍ່ມີບັນຫາຈະກັບຄືນ null. |
| remove(index) | ການເອົາອົງການ <option> ທີ່ມີບັນຫາທີ່ກໍານົດມາຈາກອົງການສະແດງ: |
ຂໍ້ມູນດ້ານເຕັກນິກ
| ເສລີພາບ DOM: | Core Level 2 Document Object |
|---|---|
| ຜົນກະທົບ: |
HTMLOptionsCollection ອົງການສະແດງຂອງພັນທະສານ Core Level 2 Document Object ພັນທະສານຂອງອົງການສະແດງທີ່ມາຈາກລາຍການຂອງລາຍການຄັດເລືອກ: |
ຕົວຢ່າງອື່ນໆ
ຕົວຢ່າງ 2：[index]
ການເອົາຄວາມຂອງຄະນະເລືອກທີໜຶ່ງ (ບັນຫາທີ 0) ຂອງລາຍການຄັດເລືອກ:
var x = document.getElementById("mySelect").options[0].text;
ຜົນຂອງ x ຈະເປັນ:
ອານານິຄົມ
ຕົວຢ່າງ 3：item(index)
ການເອົາຄວາມຂອງຄະນະເລືອກທີໜຶ່ງ (ບັນຫາທີ 0) ຂອງລາຍການຄັດເລືອກ:
var x = document.getElementById("mySelect").options.item(0).text;
ຜົນຂອງ x ຈະເປັນ:
ອານານິຄົມ
ຕົວຢ່າງ 4：namedItem(id)
ການເອົາຄວາມຂອງຄະນະເລືອກທີ່ id="orange" ຂອງລາຍການຄັດເລືອກ:
var x = document.getElementById("mySelect").options.namedItem("orange").text;
ຜົນຂອງ x ຈະເປັນ:
ກະຈັດ
ຕົວຢ່າງ 5
ການເພີ່ມຄະນະເລືອກຢູ່ຕຳແຫນ່ງທີ “1” ຂອງລາຍການຄັດເລືອກ “Kiwi”:
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 + "<br>";
}
ຜົນຂອງ x ຈະເປັນ:
ອານານິຄົມ ກະຈັດ ປາການາຍ ອານານິຄົມ
ຕົວຢ່າງ 8
ເລືອກຕົວເລືອກຂອງຕົວເລືອກລາຍການລົງໃນ id="demo" ຂອງປະກອບສັນຍາ:
var x = document.getElementById("mySelect");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;
ຜົນຂອງ x ຈະເປັນ:
ອານານິຄົມ
ຕົວຢ່າງ 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);
}
}
}
