ตัวอย่างนี้แบ่งปันการใช้งาน JS SELECT เมนูแบบดรอปดาวน์การเชื่อมโยงรองสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <%String Path = request.getContextPath (); String basepath = request.getScheme ()+": //"+"getServerName ()+": " "-// w3c // dtd html 4.01 transitional // en"> <html> <head> <title> เอกสารใหม่ </title> <meta name = "generator" content = "editPlus"> <meta name = "uction" content = ""> type = "text/javascript"> // กำหนดอาร์เรย์สองมิติของเมืองและลำดับในนั้นเหมือนกับของจังหวัด รับค่าตัวห้อยของจังหวัดโดย SelectedIndex เพื่อให้ได้อาร์เรย์ในเมืองที่สอดคล้องกัน var City = [["Beijing", "Tianjin", "Shanghai", "Chongqing"], ["Nanjing", "Suzhou", "Nantong", "Changzhou" ["กวางโจว", "Chaoyang", "Chaozhou", "Chenghai"], ["Lanzhou", "Baiyin", "Dingxi", "Dunhuang"]]; ฟังก์ชั่น getCity () {// รับวัตถุของกล่องดรอปดาวน์ของจังหวัด var sltprovince = document.form1.province; // รับวัตถุของกล่องดรอปดาวน์ของเมือง var sltcity = document.form1.city; // รับอาร์เรย์ของเมือง var ของจังหวัดที่สอดคล้องกันจังหวัด = เมือง [sltprovince.SelectedIndex - 1]; // ล้างกล่องดรอปดาวน์เมืองโดยเหลือเฉพาะตัวเลือกที่รวดเร็ว sltcity.length = 1; // เติมค่าในอาร์เรย์ของเมืองลงในกล่องดรอปดาวน์เมือง (var i = 0; i <provincity.length; i ++) {sltcity [i+1] = ตัวเลือกใหม่ (Provincity [i], Provincecity [i]); }} </script> </head> <body> <รูปแบบวิธี = โพสต์การกระทำ = "" name = "form1"> <เลือกชื่อ = "จังหวัด" onChange = "getCity ()"> <ตัวเลือกค่า = "0"> โปรดเลือกจังหวัดของคุณ </ตัวเลือก> จังหวัด "> จังหวัดฟูเจี้ยน </ตัวเลือก> <ตัวเลือกค่า =" มณฑลกวางตุ้ง "> มณฑลกวางตุ้ง </ตัวเลือก> <ตัวเลือกค่า =" มณฑลกานซู "> มณฑลกานซู </ตัวเลือก> </เลือก> <เลือกชื่อ =" เมือง "> <ตัวเลือกรหัสนี้ค่อนข้างง่าย
หากคุณไม่คุ้นเคยกับ JS คุณสามารถดู เนื้อหาต่อไปนี้เกี่ยวกับการประมวลผล JS Select Objects :
1. ใช้คุณสมบัติ SelectedIndex เพื่อรับดัชนีของตัวเลือกปัจจุบัน
ตัวเลือกในกล่องดรอปดาวน์คืออาร์เรย์เชิงเส้นแต่ละตัวเลือกมีดัชนีและ SelectedIndex แสดงถึงหมายเลขดัชนีของตัวเลือกที่เลือกในปัจจุบัน เมื่อรวมกับแอตทริบิวต์ตัวเลือกสามารถรับวัตถุตัวเลือกที่เลือกได้เพื่อให้สามารถประมวลผลเพิ่มเติมได้ เมื่อกล่องดรอปดาวน์สามารถเลือกได้หลายแบบเลือกคุณสมบัติ SelectedIndex จะส่งคืนดัชนีที่เลือกแรก
SelectedIndex เป็นคุณสมบัติแบบอ่านอย่างเดียว หากคุณต้องการตั้งค่ารายการในกล่องดรอปดาวน์ที่ระบุผ่านดัชนีไปยังสถานะที่เลือกคุณสามารถตั้งค่า = TRUE ที่เลือกไว้ของวัตถุตัวเลือกเพื่อให้ได้
2. เพิ่มตัวเลือกลงในวัตถุที่เลือก
sltcity [i+1] = ตัวเลือกใหม่ (Provincecity [i], Provincecity [i]);
ตัวเลือกใหม่ (Provincity [I], ProvinceCity [i]) หมายถึงการสร้างวัตถุตัวเลือกที่มีค่า Provincity [i] และข้อความคือ Provincecity [i] Sltcity เป็นวัตถุในเมืองบนหน้า i+1 ระบุตำแหน่งของตัวเลือกที่เพิ่มขึ้นใหม่
3. ล้างวัตถุเลือก
มีสองวิธีในการลบตัวเลือกทั้งหมดในกล่องดรอปดาวน์
วิธีแรกคือการสำรวจการลบ:
var l = myselect.length; สำหรับ (var i = 0; i <l; i ++) {myselect.options [i] = null; -วิธีที่สองค่อนข้างง่ายดังนั้นวิธีนี้จึงใช้โดยทั่วไป:
myselect.length = 0;