ความเข้าใจพื้นฐาน:
var e = document.getElementById("selectId");
e. options= ตัวเลือกใหม่ ("ข้อความ", "ค่า");
//สร้างออบเจ็กต์ตัวเลือก นั่นคือสร้าง <option value="value">ข้อความ</option> อย่างน้อยหนึ่งรายการในแท็ก <select>
//options คืออาร์เรย์ซึ่งสามารถจัดเก็บแท็กได้หลายแท็ก เช่น <option value="value">text</option>
1: คุณสมบัติของตัวเลือก [ ] อาร์เรย์:
คุณลักษณะความยาว --------- คุณลักษณะความยาว
แอตทริบิวต์ SelectedIndex -------- ค่าดัชนีของข้อความในกล่องที่เลือกในปัจจุบัน ค่าดัชนีนี้จะถูกจัดสรรโดยอัตโนมัติโดยหน่วยความจำ (0,1,2,3...) ที่สอดคล้องกับ (ค่าข้อความแรก , ค่าข้อความที่สอง, ค่าข้อความที่สาม, ค่าข้อความที่สี่...)
2: คุณลักษณะของตัวเลือกเดียว (---obj.options[obj.selecedIndex] เป็นแท็ก <option> ที่ระบุ ซึ่งเป็น ---)
แอตทริบิวต์ข้อความ --------- ส่งคืน / ระบุข้อความ
ค่าแอตทริบิวต์------ส่งคืน/ระบุค่า สอดคล้องกับ <options value="...">
คุณลักษณะดัชนี -------- ส่งคืนตัวห้อย
คุณลักษณะที่เลือก ------- ส่งคืน/ระบุว่าวัตถุถูกเลือกหรือไม่ โดยการระบุจริงหรือเท็จ รายการที่เลือกสามารถเปลี่ยนแปลงได้แบบไดนามิก
defaultSelected คุณลักษณะ ----- ส่งคืนว่าวัตถุถูกเลือกตามค่าเริ่มต้นหรือไม่ จริง/เท็จ
3: วิธีการทางเลือก
เพิ่มแท็ก <option>-----obj.options.add(new("text","value"));<add>
ลบแท็ก <option>-----obj.options.remove(obj.selectedIndex)<delete>
รับข้อความของแท็ก <option>-----obj.options[obj.selectedIndex].text<check>
แก้ไขค่าของแท็ก <option>-----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
ลบแท็ก <option> ทั้งหมด-----obj.options.length = 0
รับค่าของแท็ก <option>-----obj.options[obj.selectedIndex].value
สังเกต:
a: เมธอดข้างต้นเขียนเหมือนเมธอดประเภทนี้ obj.options.function() แทน obj.funciton เพราะเพื่อพิจารณาความเข้ากันได้ภายใต้ IE และ FF เช่น obj.add() จะใช้ได้เฉพาะใน IE เท่านั้น .
b: ตัวเลือกใน obj.option ไม่จำเป็นต้องเป็นตัวพิมพ์ใหญ่ และตัวเลือกในตัวเลือกใหม่จะต้องเป็นตัวพิมพ์ใหญ่
สองแอปพลิเคชัน
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<ภาษาสคริปต์ = "จาวาสคริปต์">
หมายเลขฟังก์ชัน(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat","4");//เปลี่ยนค่าของค่าที่เลือกในปัจจุบัน
//obj.options.add(ตัวเลือกใหม่("อาหารของฉัน", "4")); เพิ่มตัวเลือกอื่น
//alert(obj.selectedIndex);//แสดงหมายเลขซีเรียล ตัวเลือกถูกตั้งค่าด้วยตัวเอง
//obj.options[obj.selectedIndex].text = "อาหารของฉัน";
//obj.remove(obj.selectedIndex); ลบฟังก์ชัน
-
</สคริปต์>
</หัว>
<ร่างกาย>
<select id="mySelect">
<option>กระเป๋าของฉัน</option>
<option>สมุดบันทึกของฉัน</option>
<option>น้ำมันของฉัน</option>
<option>ภาระของฉัน</option>
</เลือก>
<input type="button" name="button" value="ดูผลลัพธ์" onclick="number();">
</ร่างกาย>
</html>
จากสิ่งเหล่านี้ ฉันจึงใช้ฟังก์ชันเล็กๆ โดยใช้ JQEURY AJAX+JSON ดังนี้:
รหัส JS: (ใช้เฉพาะรหัสที่เกี่ยวข้องกับ SELECT เท่านั้น)
คัดลอกรหัสรหัสดังต่อไปนี้:
-
* @description รายการแบบเลื่อนลงการเชื่อมโยงคอมโพเนนต์ (ใช้งานโดยใช้ AJAX และ JSON ของ JQUERY)
* @prarm selectId ID ของรายการแบบเลื่อนลง
* วิธีการ @prarm ชื่อของวิธีการที่จะเรียก
* @prarm temp รหัสซอฟต์แวร์ถูกเก็บไว้ที่นี่
* @prarm url ที่อยู่ที่จะข้ามไป
-
ฟังก์ชั่น linkAgeJson (selectId, วิธีการ, อุณหภูมิ, url) {
$j.ajax({
type: "get",//ใช้วิธี get เพื่อเข้าถึงพื้นหลัง
dataType: "json",//ส่งคืนข้อมูลในรูปแบบ json
url: url,//ที่อยู่แบ็กเอนด์ที่จะเข้าถึง
ข้อมูล: "method=" + method+"&temp="+temp,//ข้อมูลที่จะส่ง
สำเร็จ: function(msg){//msg เป็นข้อมูลที่ส่งคืน การเชื่อมโยงข้อมูลเสร็จสิ้นที่นี่
ข้อมูล var = msg.lists;
coverJsonToHtml(selectId,ข้อมูล);
-
-
-
-
* @description แปลงข้อมูล JSON เป็นรูปแบบข้อมูล HTML
* @prarm selectId ID ของรายการแบบเลื่อนลง
* @prarm nodeArray ส่งคืนอาร์เรย์ JSON
-
-
ฟังก์ชั่น coverJsonToHtml (selectId, nodeArray) {
//รับเลือก.
var tempSelect=$j("#"+selectId);
//ล้างค่าที่เลือก
isClearSelect(selectId,'0');
var tempOption=null;
สำหรับ (var i=0;i<nodeArray.length;i++){
//สร้างตัวเลือกที่เลือก
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//ใส่ตัวเลือกเพื่อเลือก
tempSelect.ผนวก(tempOption);
-
// รับรายการส่วนประกอบที่เสื่อมโทรม
getCpgjThgl(selectId,'thgjDm');
-
-
* @description ล้างค่าของรายการแบบเลื่อนลง
* @prarm selectId ID ของรายการแบบเลื่อนลง
* @prarm index ตำแหน่งดัชนีที่เริ่มการหักล้าง
-
ฟังก์ชั่น isClearSelect (selectId, ดัชนี) {
var length=document.getElementById(selectId).options.length;
ในขณะที่ (ความยาว! = ดัชนี) {
//ความยาวกำลังเปลี่ยนแปลงเพราะต้องได้รับใหม่
length=document.getElementById(selectId).options.length;
สำหรับ (var i=index;i<length;i++)
document.getElementById(selectId).options.remove(i);
ความยาว=ความยาว/2;
-
-
-
* @description รับรายการส่วนประกอบที่เสื่อมโทรม
* @prarm selectId1 หมายถึง ID ของรายการดรอปดาวน์ซอฟต์แวร์
* @prarm selectId2 ID ของรายการดรอปดาวน์ส่วนประกอบที่เสื่อมลง
-
ฟังก์ชั่น getCpgjThgl (selectId1, selectId2) {
var obj1=document.getElementById(selectId1);//รายการดรอปดาวน์ซอฟต์แวร์อ้างอิง
var obj2=document.getElementById(selectId2);//รายการแบบเลื่อนลงส่วนประกอบเสื่อมลง
var len=obj1.options.length;
//เมื่อความยาวของรายการซอฟต์แวร์อ้างอิงเท่ากับ 1 รายการซอฟต์แวร์จะถูกส่งกลับและไม่มีการดำเนินการใดๆ
ถ้า(เลน==1){
กลับเท็จ;
-
//ล้างค่าของรายการแบบเลื่อนลง ซึ่งใช้ได้ทั้งสองวิธี
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
สำหรับ (var i=0;i<len; i++){
ตัวเลือก var= obj1.options[i];
// รายการที่เลือกที่อ้างอิงโดยซอฟต์แวร์จะไม่ถูกเพิ่ม
ถ้า(i!=obj1.selectedIndex){
//Clone OPTION และเพิ่มลงใน SELECT
obj2.appendChild(ตัวเลือก.cloneNode(จริง));
-
-
-
รหัส HTML:
คัดลอกรหัสรหัสดังต่อไปนี้:
<เส้นขอบตาราง=0 align="ซ้าย" cellPadding=0 cellSpacing=1>
<tr>
<td> <span>*</span>ซอฟต์แวร์อ้างอิง:</td>
<td>
<input name="yyrjMc" id="yyrjMc" type="text" tabindex="3" size="30">
<input name="yyrjDm" id="yyrjDm" type="hidden" >
<ประเภทอินพุต = "ปุ่ม"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="เลือก...">
</td>
</tr>
<tr>
<td> <span>*</span>เวอร์ชันใบเสนอราคา:</td>
<td id="yyfb">
<select name="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</เลือก>
</td>
</tr>
<tr>
<td>ส่วนประกอบเสื่อมลง:</td>
<td id="thgj">
<select name="thgjDm" id="thgjDm">
<option value="-1" ที่เลือก>ไม่มี</option>
</เลือก>
</td>
</tr>
</ตาราง>