Javascript realisiert die einfache Erstellung zweistufiger kaskadierender Menü-Javascript-Fähigkeiten-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Javascript realisiert die einfache Erstellung zweistufiger kaskadierender Menü-Javascript-Fähigkeiten

May 16, 2016 pm 03:31 PM

Das Beispiel in diesem Artikel beschreibt die einfache Methode zum Erstellen eines kaskadierenden Menüs mit zwei Ebenen mithilfe von JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; 
&lt;html&gt; 
 &lt;head&gt; 
  
 &lt;title&gt;&lt;/title&gt; 
  
 &lt;meta http-equiv="pragma" content="no-cache"&gt; 
 &lt;meta http-equiv="cache-control" content="no-cache"&gt; 
 &lt;meta http-equiv="expires" content="0"&gt;  
 &lt;meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&gt; 
 &lt;meta http-equiv="description" content="This is my page"&gt; 
 &lt;script type="text/javascript" src="../../js/jquery-1.11.1.js"&gt;&lt;/script&gt; 
 &lt;style type="text/css"&gt; 
  .body_tag{ 
   width: 100%; 
   height: 100%; 
  } 
 &lt;/style&gt; 
 &lt;script type="text/javascript"&gt; 
  /** 
   * 
   */ 
   function province() 
   { 
    var proName = $("#areaName").val(); 
    $("#city").empty(); 
    $("#city").append("&lt;option value='0'&gt;全部&lt;/option&gt;"); 
    if(proName == "1") 
    { 
     $("#city").append("&lt;option value='1'&gt;广州市&lt;/option&gt;"+ 
         "&lt;option value='2'&gt;深圳市&lt;/option&gt;"+ 
         "&lt;option value='3'&gt;中山市&lt;/option&gt;"); 
    } 
    if(proName == "2") 
    { 
     $("#city").append("&lt;option value='1'&gt;武汉市&lt;/option&gt;"+ 
         "&lt;option value='2'&gt;黄石市&lt;/option&gt;"+ 
         "&lt;option value='3'&gt;黄冈市&lt;/option&gt;"); 
    } 
   } 
 &lt;/script&gt; 
 &lt;/head&gt; 
 
 &lt;body class="body_tag"&gt; 
  &lt;table id="tab"&gt; 
   &lt;tr&gt; 
   &lt;td&gt; 
    &lt;label for="areaName"&gt;省份：&lt;/label&gt; 
    &lt;select id="areaName" onchange="province()"&gt; 
     &lt;option value="0"&gt;全国&lt;/option&gt; 
     &lt;option value="1"&gt;广东&lt;/option&gt; 
     &lt;option value="2"&gt;湖北&lt;/option&gt; 
    &lt;/select&gt; 
    &lt;label for="city"&gt;地市：&lt;/label&gt; 
    &lt;select id="city"&gt; 
     &lt;option value="0"&gt;全部&lt;/option&gt; 
    &lt;/select&gt; 
   &lt;/td&gt; 
   &lt;/tr&gt; 
  &lt;/table&gt; 
 &lt;/body&gt; 
&lt;/html&gt;

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

Erklärung dieser Website

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