Heim > Artikel > Web-Frontend > Der einfachste JS-Code zum Implementieren ausgewählter sekundärer Linkage-Dropdown-Menu_Javascript-Fähigkeiten

Der einfachste JS-Code zum Implementieren ausgewählter sekundärer Linkage-Dropdown-Menu_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:05:092096Durchsuche

Das Beispiel in diesem Artikel zeigt Ihnen die js-Implementierung des Dropdown-Menüs „Sekundäre Verknüpfung auswählen“ als Referenz. Der spezifische Inhalt ist wie folgt:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <script language="JavaScript" type="text/javascript">
   //定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
   var city=[
   ["北京","天津","上海","重庆"],
   ["南京","苏州","南通","常州"],
   ["福州","福安","龙岩","南平"],
   ["广州","潮阳","潮州","澄海"],
   ["兰州","白银","定西","敦煌"]
   ];

   function getCity(){
     //获得省份下拉框的对象
     var sltProvince=document.form1.province;
     //获得城市下拉框的对象
     var sltCity=document.form1.city;     
     //得到对应省份的城市数组
     var provinceCity=city[sltProvince.selectedIndex - 1];
 
     //清空城市下拉框，仅留提示选项
     sltCity.length=1;
 
     //将城市数组中的值填充到城市下拉框中
     for(var i=0;i<provinceCity.length;i++){
       sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
     }
   }
 </script>
 </HEAD>
 
 <BODY>
 <FORM METHOD=POST ACTION="" name="form1">
     <SELECT NAME="province" onChange="getCity()">
       <OPTION VALUE="0">请选择所在省份 </OPTION>
       <OPTION VALUE="直辖市">直辖市 </OPTION>
       <OPTION VALUE="江苏省">江苏省 </OPTION>
       <OPTION VALUE="福建省">福建省 </OPTION>
       <OPTION VALUE="广东省">广东省 </OPTION>
       <OPTION VALUE="甘肃省">甘肃省 </OPTION>
     </SELECT>
     <SELECT NAME="city">
       <OPTION VALUE="0">请选择所在城市 </OPTION>
     </SELECT>
   </FORM>
 </BODY>
</HTML>

Dieser Code ist relativ einfach.

Wenn Sie mit js nicht vertraut sind, können Sie sich den folgenden Inhalt zur js-Verarbeitung ausgewählter Objekte ansehen:

1. Verwenden Sie das selectedIndex-Attribut, um den Index der aktuellen Option abzurufen
Die Optionen des Dropdown-Felds sind ein lineares Array, jede Option hat einen Index und selectedIndex stellt die Indexnummer der aktuell ausgewählten Option dar. In Kombination mit dem Optionsattribut kann das ausgewählte Optionsobjekt zur weiteren Verarbeitung abgerufen werden. Wenn das Dropdown-Feld eine Mehrfachauswahl zulässt, gibt die Eigenschaft selectedIndex den ersten ausgewählten Index zurück.
selectedIndex ist eine schreibgeschützte Eigenschaft. Wenn Sie das durch den Index angegebene Element im Dropdown-Feld auf den ausgewählten Status setzen möchten, können Sie dafür selected=true für das Optionsobjekt festlegen.

2. Fügen Sie dem ausgewählten Objekt eine Option hinzu
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
new Option(provinceCity[i],provinceCity[i]) bedeutet, dass ein Optionsobjekt mit dem Wert „provinceCity[i]“ und dem Text „provinceCity[i]“ erstellt wird. Das Stadtobjekt auf der Seite gibt i+1 an der neuen Option.

3. Ein ausgewähltes Objekt löschen
Es gibt zwei Möglichkeiten, alle Optionen im Dropdown-Feld zu löschen,
Die erste Methode besteht darin, Folgendes zu durchlaufen und zu löschen:

 var l=myselect.length;
 for(var i=0;i<l;i++){
 myselect.options[i]=null;
 }

Die zweite Methode ist relativ einfach, daher wird im Allgemeinen diese Methode verwendet:
myselect.length=0;

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Toller jQuery-Bildkarussell-Effekt_jqueryNächster Artikel：Toller jQuery-Bildkarussell-Effekt_jquery

In Verbindung stehende Artikel

Mehr sehen