recherche

Maison  >  Article  >  interface Web  >  Le code js le plus simple pour implémenter certaines compétences de menu déroulant de liaison secondaire_javascript

Le code js le plus simple pour implémenter certaines compétences de menu déroulant de liaison secondaire_javascript

WBOY
WBOYoriginal
2016-05-16 15:05:092130parcourir

L'exemple de cet article partage avec vous l'implémentation js du menu déroulant de sélection des liens secondaires pour votre référence. Le contenu spécifique est le suivant

. 

<%@ 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>

Ce code est relativement simple.

Si vous n'êtes pas familier avec js, vous pouvez consulter le contenu suivant sur le traitement par js des objets sélectionnés :

1. Utilisez l'attribut selectedIndex pour obtenir l'index de l'option actuelle
Les options de la liste déroulante sont un tableau linéaire, chaque option a un index et selectedIndex représente le numéro d'index de l'option actuellement sélectionnée. Combiné avec l'attribut options, l'objet option sélectionné peut être obtenu pour un traitement ultérieur. Lorsque la liste déroulante autorise plusieurs sélections, la propriété selectedIndex renvoie le premier index sélectionné.
selectedIndex est une propriété en lecture seule Si vous souhaitez définir l'élément dans la liste déroulante spécifiée par l'index sur l'état sélectionné, vous pouvez définir selected=true de l'objet option pour y parvenir.

2. Ajouter une option à l'objet sélectionné
sltCity[i+1]=nouvelle option(provinceCity[i],provinceCity[i]);
new Option(provinceCity[i],provinceCity[i]) signifie créer un objet option avec une valeur de provinceCity[i] et un texte de provinceCity[i]. sltCity est l'objet city sur la page i+1 spécifie l'emplacement. de la nouvelle option.

3. Effacer un objet sélectionné
Il existe deux façons de supprimer toutes les options dans la liste déroulante,
La première méthode consiste à parcourir et supprimer : 

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

La deuxième méthode est relativement simple, donc cette méthode est généralement utilisée :
myselect.length=0;

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Superbe carrousel d'images jQuery effect_jqueryArticle suivant：Superbe carrousel d'images jQuery effect_jquery

Articles Liés

Voir plus