تشترك الأمثلة في هذه المقالة في المؤثرات الخاصة لقائمة JS المنسدلة للرجوع إليها. المحتوى المحدد كما يلي
مثال 1: القائمة المنسدلة المقاطعة والبلدية المرتبطة
يحدث حدث OnChange عندما يتغير محتوى المجال.
<script type = "text/javaScript"> var arr = new array () ؛ // Data Array // define data ، الهيكل: المعرف ، الاسم ، معرف الوالدين arr [arr.length] = [1 ، 'beijing' ، null] ؛ arr [arr.length] = [2 ، 'sichuan' ، null] ؛ arr [arr.length] = [3 ، 'Guangdong' ، null] ؛ arr [arr.length] = [4 ، 'beijing' ، 1] ؛ arr [arr.length] = [5 ، 'Chengdu' ، 2] ؛ arr [arr.length] = [6 ، 'Guangzhou' ، 3] ؛ arr [arr.length] = [7 ، 'Shenzhen' ، 3] ؛ // الإعداد الديناميكي لوظيفة العنصر المنسدلة (type) {if (type == 'Province') {// احصل على DOM من القائمة المنسدلة في المقاطعة var province = document.getElementById ("المقاطعة") ؛ PRONSINCE.INNERHTML = '' ؛ // content فارغ أولاً // املأ في sub-charracter var prosttr = '<Option Value = ""> </potion>' ؛ // نقل الصفيف لـ (var i = 0 ؛ i <arr.length ؛ i ++) {var item = arr [i] ؛ // العنصر الحالي // إذا لم يكن هناك معرف الوالدين ، فهذا هو المقاطعة إذا (العنصر [2] == null) prostt+= '<ortive value ='+item [0]+'>'+item [1]+'</potion>' ؛ } province.innerhtml = // املأ محتوى جديد} آخر إذا (type == 'city') {// احصل على معرف المقاطعة الحالية var currproid = document.getElementById ("المقاطعة"). القيمة ؛ إذا (currproid == '') إرجاع خطأ ؛ // احصل على DOM of the City Sroprow Menu var City = document.getElementById ("City") ؛ city.innerhtml = '' ؛ // املأ المحتوى أولاً // املأ الحرف var citystr = '<ortion value = ""> </potion>' ؛ // transweep الصفيف لـ (var i = 0 ؛ i <arr.length ؛ i ++) {var item = arr [i] ؛ // العنصر الحالي // الحكم على ما إذا كانت المدينة المحفوظة الحالية إذا (العنصر [2] == Currproid) CityStr+= '<Option Value ='+item [0]+'>'+item [1]+'</potion>' ؛ } city.innerhtml = citystr ؛ // املأ محتوى جديد}} </script> <body style = "text-align: center ؛" onload = "flowoptions ('Province') ؛"> <!-تحديد القائمة المنسدلة-> التوفير: <select id = "province" onChange = "FlowOptions ('city')"> </select> <br/> <br/> المدينة: <select id = "city"> <ber> <br/> </body>مثال 2: الارتباط المكون من ثلاثة مستويات للمقاطعات والمدن والمقاطعات المنسدلة
<script type = "text/javaScript"> var arr = new array () ؛ // Data Array // define data ، الهيكل: المعرف ، الاسم ، معرف الوالدين arr [arr.length] = [1 ، 'beijing' ، null] ؛ arr [arr.length] = [2 ، 'sichuan' ، null] ؛ arr [arr.length] = [3 ، 'Guangdong' ، null] ؛ arr [arr.length] = [4 ، 'beijing' ، 1] ؛ arr [arr.length] = [5 ، 'Chengdu' ، 2] ؛ arr [arr.length] = [6 ، 'Guangzhou' ، 3] ؛ arr [arr.length] = [7 ، 'Shenzhen' ، 3] ؛ arr [arr.length] = [8 ، 'Wuhou District' ، 5] ؛ arr [arr.length] = [9 ، 'Qingyang District' ، 5] ؛ arr [arr.length] = [10 ، 'Baiyun District' ، 6] ؛ arr [arr.length] = [11 ، 'Zengcheng City' ، 6] ؛ arr [arr.length] = [12 ، 'Conghua City' ، 6] ؛ // الإعداد الديناميكي لوظيفة Project Project FillOptions (type) {if (type == 'Province') {// احصل على DOM من القائمة المنسدلة في المقاطعة var province = document.getElementByID ("المقاطعة") ؛ PRONSINCE.INNERHTML = '' ؛ . لـ (var i = 0 ؛ i <arr.length ؛ i ++) {// transfer the array var item = arr [i] ؛ // العنصر الحالي // إذا لم يكن هناك معرف الوالدين ، فهذا هو المقاطعة إذا (العنصر [2] == null) prostt+= '<ortive value ='+item [0]+'>'+item [1]+'</potion>' ؛ } province.innerhtml = prosttr ؛ // املأ محتوى جديد} آخر إذا (type == 'city') {// احصل على معرف المقاطعة الحالية var currproid = document.getElementById ("Province"). value ؛ إذا (currproid == '') إرجاع خطأ ؛ // احصل على DOM of the City Sroprow Menu var City = document.getElementById ("City") ؛ city.innerhtml = '' ؛ // content فارغ أولاً // املأ حرف المدينة var citystr = '<option value = ""> </potion>' ؛ لـ (var i = 0 ؛ i <arr.length ؛ i ++) {// transfer the array var item = arr [i] ؛ // العنصر الحالي // الحكم على ما إذا كانت المدينة المحفوظة حاليًا إذا (العنصر [2] == Currproid) CityStr+= '<Option Value ='+item [0]+'>'+item [1]+'</potion>' ؛ } city.innerhtml = citystr ؛ // املأ محتوى جديد} آخر إذا (type == 'area') {// احصل على معرف المدينة الحالية currcityid = document.getElementById ("City"). value ؛ إذا (currCityId == '') إرجاع خطأ ؛ // احصل على DOM في منطقة VAR المنسدلة المقاطعة والمقاطعة = document.getElementByID ("المنطقة") ؛ area.innerhtml = '' ؛ // املأ حرف المقاطعة والمقاطعة VARLESTR = '<Option Value = ""> </potion>' ؛ لـ (var i = 0 ؛ i <arr.length ؛ i ++) {// transfer the array var item = arr [i] ؛ // العنصر الحالي // الحكم على ما إذا كانت مقاطعة أو مقاطعة تحت المدينة الحالية إذا (العنصر [2] == currcityId) المناطق+= '<خيار value ='+item [0]+'>'+item [1]+'</potion>' ؛ } area.innerhtml = velationstr ؛ // املأ المحتوى الجديد}} </script> <body style = "text-align: center ؛" onload = "flowoptions ('province') ؛"> <!-تحديد القائمة المنسدلة-> المقاطعة: <select id = "province" onChange = "flowoptions ('city')"> </select> <br/> <br/> المدينة: <select id = "city" id = "area"> </select> <br/> <br/> </body>ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.