jquery二級聯動下拉列表

2021-08-02 14:55:06 字數 924 閱讀 9575

二級聯動下拉列表選擇應用在在很多地方,比如說省市下拉聯動,商品大小類下拉選擇聯動。本文將通過例項講解使用jquery+php+mysql來實現大小分類二級下拉聯動效果。

先看下效果

大類:前端技術

程式開發

資料庫小類:

實現的效果就是當選擇大類時,小類下拉框裡的選項內容也隨著改變。實現原理:根據大類的值,通過jquery把值傳給後台php處理,php通過查詢mysql資料庫,得到相應的小類,並返回json資料給前端處理。

html

首先我們要建立兩個下拉選擇框,第乙個是大類,第二個是小類。大類的值可以是預先寫好,也可以是從資料庫讀取。

大類:

getselectval()

>

前端技術

程式開發

資料庫

小類:

jquery

先寫乙個函式,獲取大類選擇框的值,並通過$.getjson方法傳遞給後台server.php,讀取後台返回的json資料,並通過$.each方法遍歷json資料,將對應的值寫入乙個option字串,最後將option追加到小類裡。

function

getselectval(),function

(json));

});

}

在頁面初始的時候,下拉框是要設定選項的,所以在初始的時候就要呼叫getselectval(),而當大類選項改變時,也呼叫了getselectval()。

php

include_once("connect.php"); //

鏈結資料庫

$bigid = $_get["bigname"];

if(isset($bigid

))

echo json_encode($select

); }

二級聯動 下拉列表

二級聯動 下拉列表 需先選擇英雄,才能在選擇英雄的 html頁面 charset utf 8 二級聯動title head action method post 請選擇英雄 name hero id hero onchange skina select 請選擇 name skin id skin v...

js下拉列表二級聯動

學了js也有一段時間了,今天把js中較為重要的下拉列表二級聯動記錄一下。所謂二級聯動,就是要通過乙個下拉列表的選擇從而在另乙個select下拉列表中顯示出對應的資料。好比我有兩個下拉列表,第一列表是選擇省份,那麼我選擇某乙個省份,那麼另乙個列表也會對應顯示該省份的城市。如上圖所示,我選擇了河北省,那...

JS例項 二級聯動下拉列表

例項 省市二級聯動下拉列表 開啟頁面預設的省和市下拉框的的值分別為 請選擇省份 請選擇城市 在省下拉框選擇乙個省份,市下拉框則顯示相應城市名稱。然後就可以進行愉快的選擇啦!charset utf 8 省市二級聯動下拉列表例項title src js select.js script head s1 ...