コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

javascript实现二级级联菜单的简单制作

PHPz
リリース： 2018-10-10 18:01:51
オリジナル
1489 人が閲覧しました

这篇文章主要介绍了javascript实现二级级联菜单的简单制作，感兴趣的小伙伴们可以参考一下

运行效果截图如下：

具体代码如下：

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

更多相关教程请访问 JavaScript视频教程

関連ラベル：
javascript，级联菜单
ソース：php.cn
前の記事：颜色渐变效果_javascript技巧 次の記事：checkbox实现全选的多种方法 不断更新[原创]_表单特效
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
ドロップダウンが常にその親の上に表示されるようにします。位置: 相対 私は以下のようなことを達成しようとしています。コンテナーには、クリックするとアクティブになり、各親の上に配置されるドロップダウンのセットが含まれています。直面している問題: 私が現...
から 2024-04-01 18:43:16
0
1
316
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート