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

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

WBOY

Libérer： 2016-05-16 15:05:09

original

2095 Les gens l'ont consulté

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>

Copier après la connexion

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;
 }

Copier après la connexion

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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