jQuery實作多級連動下拉式清單查詢框

首頁

web前端

js教程

jQuery實作多級連動下拉式清單查詢框_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

jquery 下拉清單多級聯動查詢

本文實例介紹了jQuery實作多級連動下拉清單查詢框的詳細程式碼，分享給大家供大家參考，具體內容如下

效果圖：

具體代碼：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title></title>
  <meta name="keywords" content=" keywords" />
  <meta name="description" content="description" />
</head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
<style type="text/css">
  body{font-size:13px}
  .clsInit{width:435px;height::35px;line-height:35px;padding-left:10px}
  .clsTip{padding-top:5px;background-color:#eee;display:none}
  .btn{border:solid 1px #666;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;filter:progid:DXImageTransform.Mcrosoft.Gradient(GraientType=0,StartColorStr=#FFFFFF,EndColorStr=#ECE9D8);}
</style>
<body>
<script type="text/javascript">
  $(function(){
    function objInit(obj){
      return $(obj).html('<option>请选择</option>');
    }
    var arrData={
      厂商1:
      {
        品牌一:'型号1-1-1,型号1-1-2',
        品牌二:'型号1-2-1,型号1-2-2'
      },
      厂商2:
      {
        品牌一:'型号2-1-1,型号2-1-2',
        品牌二:'型号2-2-1,型号2-2-2'},
      厂商3:
      {
        品牌一:'型号3-1-1,型号3-1-2',
        品牌二:'型号3-2-1,型号3-2-2'
      }
    };
    $.each(arrData,function(pF){
      $('#selF').append('<option>'+pF+'</option>');
    });
    $('#selF').change(function(){
      objInit('#selT');
      objInit('#selC');
      $.each(arrData,function(pF,pS){
        if($('#selF option:selected').text()==pF){
          $.each(pS,function(pT,pC){
            $('#selT').append('<option>'+pT+'</option>');
          });
          $('#selT').change(function(){
            objInit('#selC');
            $.each(pS,function(pT,pC){
              if($('#selT option:selected').text()==pT){
                $.each(pC.split(","),function(){
                  $('#selC').append('<option>'+this+'</option>');
                })
              }
            })
            
          });
        }
      })
    });
  });
</script>

<div class="clsInit">

  厂商：<select id="selF"><option>请选择</option></select>
  品牌：<select id="selT"><option>请选择</option></select>
  型号：<select id="selC"><option>请选择</option></select>
  <input type="button" value="查询" id="Button1" class="btn" />
</div>
<div class="clsInit" id="divTip"></div>

</body>
</html>

登入後複製

希望本文所述對大家學習jquery程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7649

CakePHP 教程

1392

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT迷你填字遊戲答案

110

Related knowledge

12306怎麼查詢歷史購票紀錄查看歷史購票紀錄的方法 Mar 28, 2024 pm 03:11 PM

12306訂票app下載最新版是一款大家非常滿意的出行購票軟體，想去哪裡就去那裡非常方便，軟體內提供的票源非常多，只需要通過實名認證就能在線購票，所有用戶的出行車票機票都可以輕鬆買到，享受不同的優惠折扣。還能提前開啟預約搶票，預約飯店、專車接送都是可以的，有了它想去哪裡就去那裡一鍵購票，出行更加簡單方便，讓大家的出行體驗更舒服，現在小編在線詳細為12306用戶帶來查看歷史購票記錄的方法。　　1.打開鐵路12306，點擊右下角我的，點擊我的訂單　　2.在訂單頁面點擊已支付。　　3.在已支付頁

學信網如何查詢自己的學歷 Mar 28, 2024 pm 04:31 PM

學信網如何查詢自己的學歷？在學信網中是可以查詢到自己的學歷，很多用戶都不知道如何在學信網中查詢到自己的學歷，接下來就是小編為用戶帶來的學信網查詢自己學歷方法圖文教程，感興趣的用戶快來一起看看吧！學信網使用教程學信網如何查詢自己的學歷一、學信網入口：https://www.chsi.com.cn/二、網站查詢：第一步：點選上方學信網位址，進入首頁點選【學歷查詢】；第二步：在最新的網頁中點選如下圖箭頭所示的【查詢】；第三步：之後在新頁面點選【的登陸學信檔案】；第四步：在登陸頁面輸入資料點選【登陸】；

MySQL與PL/SQL的異同比較 Mar 16, 2024 am 11:15 AM

MySQL與PL/SQL是兩種不同的資料庫管理系統，分別代表了關係型資料庫和過程化語言的特性。本文將比較MySQL和PL/SQL的異同點，並附帶具體的程式碼範例進行說明。 MySQL是一種流行的關聯式資料庫管理系統，採用結構化查詢語言(SQL)來管理和操作資料庫。而PL/SQL是Oracle資料庫特有的過程化語言，用於編寫預存程序、觸發器和函數等資料庫物件。相同

蘋果手機怎麼查詢啟動日期 Mar 08, 2024 pm 04:07 PM

使用蘋果手機想要查詢啟動日期，最好的方法是透過手機中的序號來查詢，也可以透過存取蘋果的官網來進行查詢，透過連接電腦查詢，下載第三方軟體查詢。蘋果手機怎麼查詢啟動日期答：序號查詢，蘋果官網查詢，電腦查詢，第三方軟體查詢1、用戶最好的方式就是知道自己手機的序號，開啟設定通用關於本機就可以看到序號。 2.使用序號不僅可以知道自己手機的啟動日期，還可以查看手機版本，手機產地，手機出廠日期等。 3.用戶訪問蘋果的官網找到技術支持，找到頁面底部的服務和維修欄目，裡面查看iPhone的激活信息。 4.用戶

如何使用Oracle 查詢表是否被鎖？ Mar 06, 2024 am 11:54 AM

標題：如何使用Oracle查詢表格是否被鎖定？在Oracle資料庫中，表鎖是指當一個事務正在對錶執行寫入操作時，其他事務想要對該表執行寫入操作或對表進行結構改變（如增加列、刪除行等）時會被阻塞。在實際開發過程中，我們經常需要查詢表格是否被鎖，以便更好地排除和處理相關問題。本文將介紹如何使用Oracle語句查詢表格是否被鎖，並給出具體的程式碼範例。要查詢表是否被鎖，我們

Discuz資料庫位置查詢技巧分享 Mar 10, 2024 pm 01:36 PM

論壇是網路上非常常見的網站形式之一，它為使用者提供了一個分享資訊、交流討論的平台。而Discuz是一款常用的論壇程序，相信很多站長都已經非常熟悉了。在進行Discuz論壇的開發和管理過程中，經常需要查詢資料庫中的資料來進行分析或處理。在這篇文章中，我們將分享一些查詢Discuz資料庫位置的技巧，並提供具體的程式碼範例。首先，我們需要了解Discuz的資料庫結構

如何查詢BitTorrent幣最新價格？ Mar 06, 2024 pm 02:13 PM

查詢BitTorrent幣(BTT)最新價格BTT是TRON區塊鏈上的加密貨幣，用於獎勵BitTorrent網路用戶分享和下載檔案。尋找BTT最新價格的方法如下：選擇一個可靠的價格查詢網站或應用程式。一些常用的價格查詢網站包括：CoinMarketCap:https://coinmarketcap.com/Coindesk:https://www.coindesk.com/幣安:https://www.binance.com/在網站或應用程式中搜尋BTT。查看BTT的最新價格。注意：加密貨幣價格

PHP常用的檔案操作函數總結 Apr 03, 2024 pm 02:52 PM

目錄1：basename()2：copy()3：dirname()4：disk_free_space()5：disk_total_space()6：file_exists()7：file_get_contents()8：file_put_contents()9：filesize()10：filetype( )11：glob()12：is_dir()13：is_writable()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：

See all articles

jQuery實作多級連動下拉式清單查詢框_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題