台灣最大程式設計社群網站
線上人數
690
 
會員總數:245216
討論主題:189089
歡迎您免費加入會員
討論區列表 >> PHP >> 二層連動下拉式選單 關聯式新增資料到資料庫
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
二層連動下拉式選單 關聯式新增資料到資料庫
價值 : 20 QP  點閱數:6926 回應數:18

樓主

Fredy
門外漢
0 5
96 10
發送站內信

各位大大請教一下!
目前在做一個新增資料的表單
其中有一項是 二層連動的下拉式選單(大分類 帶出 小分類)
因為要實現不換頁面 產生下拉選單(原本希望可以查詢資料庫來產生QQ)
所以目前是用陣列寫死在裡面 用JS來做 相關代碼約如下


我有兩個關聯的資料表
EX: pro 和 pro_category
"pro"和"pro_category"這兩個資料表有一個共同欄位是"code"(數字)
"pro_category"有兩個欄位(大小分類)"bigcat"和"smallcat"存大小類別的對應代碼
另外兩個欄位"bigcat_value","smallcat_value"存大小類別對應的文字(即下拉選單呈現的文字)
資料表是直接用DB新增的 大概像下方 大分類代碼(bigcat) 對應 數個小分類代碼(smallcat) code流水號排列
bigcat bigcat_value smallcat code
1 A 1 1
1 A 2 2
2 B 1 3
3 C 1 4
3 C 2 5
3 C 3 6

我想問的是說 如果我要新增資料到 資料庫
要如何取到這兩個連動選單的value,進而可以查詢出對應的"code"(代碼)
請各位大大幫忙 感謝!!

搜尋相關Tags的文章: [ 連動下拉式選單 ] ,
本篇文章發表於2016-02-22 16:53
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
其實我看不太明白你的問題是什麼。

我大約列出你想問的東西是什麼

1.如何傳送選定值給php。

2.如何mysql處理

因為在你的程式碼內並無看出任何跟php有相關的東西。
而且你的html是固定值。也看不出有任何資料對應的模式。
而提供的資料表節構又不清不楚的。有兩張表??

不知道該用什麼辦法來回答你的「問題?」
本篇文章回覆於2016-02-22 17:54
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

Fredy
檢舉此回應
上面貼的JS 程式碼 可以執行二層連動的下拉選單
我想問的是說
1.如何取值(兩個選單分別的值) 因為我有這兩個值,就可以select出code的值<--主要的問題
2.二層連動下拉選單 php+MySql有實現的方法嗎
感謝
表達不好請見諒!
本篇文章回覆於2016-02-22 18:12
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
回應

彩虹
檢舉此回應
我自己在寫多層下拉選單的時候,都是透過AJAX來做非同步的資料帶入

請參考以下連結,也許這是你要的

第一個下拉式選單觸發帶出第二個下拉式選單 (但這個比較複雜)
http://www.blueshop.com.tw/board/FUM20140918113025PVD/BRD20140303182125981.html
本篇文章回覆於2016-02-23 09:34
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
回應

彩虹
檢舉此回應
另外這個版本對你來說可能會比較好吸收
請再查看

簡易版使用PHP+AJAX製作二段動態下拉式選單
http://whccchi.blogspot.tw/2015/11/phpajax.html
本篇文章回覆於2016-02-23 09:37
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
回應

皮皮快跑
檢舉此回應
1.首先,AJAX當然是你在處理這件事情的不二首選。
2.能夠方便處理AJAX的當然是Jquery,可是如果要我說只要設定好取值模式就能改變select呈現,我自己反而習慣使用AngularJS。
3.當然能處理AJAX的JS框架其實相當多的,最簡單的還是JQUERY。
4.要不要每一次都用ajax去跟資料庫要資料要看你的資料量而定。畢竟每一次拋一個查詢都是一次連線,也都是消耗一次資源。
如果你的資料量並沒有大到需要常時態的搜尋產生結果,也許一次撈出來直接前端js處理就好了。連ajax都可以省掉。
本篇文章回覆於2016-02-23 10:40
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
作者回應

Fredy
檢舉此回應
謝謝彩虹大的參考資料
我去實作了 簡易版PHP +AJAX下拉選單
基本上也是針對我的資料表 修改了SQL語法
第一層下拉選單 用資料庫查詢出來沒問題
第二層AJAX response 雖然是success 不過都顯示"undefined"
爬文過也試過加上"async:false"還是一樣"undefined"
請大大幫忙我看一下 感謝!!

index.php AJAX部分


action.php


TO皮皮大
一次撈出來 有辦法做到連動 不換頁嗎
本篇文章回覆於2016-02-23 15:26
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
7樓
回應

皮皮快跑
檢舉此回應
一次撈出來當然可以做到不換頁。
重點是你怎麼去事先整理好你的資料格式。
以及處理的模式條件。
有些東西,當然是資料庫提供給你的處理方法,用起來簡單。
但問題是,你每一次的處理都要經過一次的連線,一次的資料庫處理。
換個方式。我前面說過,如果資料不是很大,或是很經常性在變動(比如說你一分鐘前跟一分鐘後的資料就已經不同了。)
你可以選擇一次性的撈出來,處理好結構後,拋給js去處理。
簡單而言問題就只是你對資料呈現的處理模式有沒有經驗而已。
本篇文章回覆於2016-02-23 17:04
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
8樓
不錯的參考

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
依照你#6大至上說幾個問題。然後你往那些問題再做修改

1.你的ajax已經宣告回傳格式是json。理論上來講再怎麼回傳都不可能是""(空值)
所以你的第17行的判斷是多餘的。且也無用。

2.正常來說,你已經empty了。也無需再去操作他的選項回到第一層。
因為當清空時,自然也會將選定值也一起清掉了。在沒選定值的情況下,預設就是在第一個。
所以你18行的操作也是多餘的。

3.php內的回傳格式。永遠都要是json的格式。要不然javascript會出錯或判斷錯誤。
所以當選定值是0的情況下。你該回傳的是一個空的陣列值並化成json格式
也就是說你的14~17行因該是要改成

讓它回傳空陣列的json格式出去。


4.請善用$.each。其實不需要用while。
因為你已經是回傳json的格式了。理論上來說使用each就夠了。
所以你的

可以改成


最後,再告訴你皮皮說的一次性技術。在變動性不大的情況下。的確可以不需要用ajax的方式。
可以在載入html時就將資料全數帶入。
畢竟每一次的ajax就是一次的資料庫連帶。真沒必要的確是不需要讓它再跑一次。
但這個是需要符合一些條件。才能用一次性帶入。
其一就是資料不能太大。(會造成載入緩慢的問題)
其二就是變動性不大。(這樣才不會發生即時性的資料對應問題)

這個技術其實也沒什麼。就是你在載入html時將資料載入並化成json就行了。
其實就像你#1的程式碼3~6行那樣。只是最好用json格式。比較好轉換。(因為只要用json_encode就處理好了)
當然你要用array格式也行,就是程式碼麻煩了一點。
本篇文章回覆於2016-02-23 17:55
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
9樓
回應

皮皮快跑
檢舉此回應
我想我先來提供一個簡單的二層式選單的做法(純以資料觀念來看,而不是在講如何去做二(多)層式選單)

這個範例你可以整個貼回去存檔就可以立刻執行了。
你需要仔細了解一下的是資料結構怎麼去達到你想要的部份。
當然這就是指一次性的結構,也就是不需要透過ajax去處理。
本篇文章回覆於2016-02-23 18:06
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
10樓
回應

皮皮快跑
檢舉此回應
再來貼一個範例,這算是我個人最喜歡的做法了。
因為只要需要去專注在改變資料的東西,而不太有多餘要處理元件的動作。
使用的套件是angularJS
該套件的官網:
angularJS官網

注意的是進去官網先就angular 1 學習就好。
2的部份是新出的但我還沒研究,而且似乎是使用typescript來開發。



這段code一樣是直接複製回去就能跑了。
(二次的範例我都是使用cdn的方式,所以不用去載他們的執行元件)
比較要稍稍也不用太在意的事情其實就是……這是獨立的元件,所以並無掛載jquery。
不過其實jquery跟angularJS其實是可以混著使用就是了,不過要稍微注意一下可能的衝突。(通常問題不大)
本篇文章回覆於2016-02-23 19:08
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
11樓
回應

皮皮快跑
檢舉此回應
上面angularJS的範例我附帶說明一個就是。
在code的最後一行有個

這是預設宣告一開始的select2初始值。如果不想把這個放在code裡面可以在html去宣告如下:

ng-init就是在元件初始化時要去執行的動作。
本篇文章回覆於2016-02-23 19:13
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
12樓
回應

皮皮快跑
檢舉此回應
不過上述的所有範例都還只是在顯示的部份。
事實上jquery的取值是比較容易。
而angualarJS的取值其實是「更加容易」。
只不過如果對於angularJS的scope不是很了解的話。
可能就會稍微卡住想不通這值該怎麼取出來送出。
不過如果這部份要是都能理解的話,未來你在處理這些東西時,就會很專注在$scope的scope變數的變化上。
可以更得心應手的去操控資料變化。
順帶一個沒提到的就是……angularJS當然也有ajax的取資料方式。
不過因為他的post本身設計上的格式問題會造成直接使用的話php會接不到資料。
關於這個解法我晚一點吃完飯後來補充好了。(如果我還記得這件事的話。)
本篇文章回覆於2016-02-23 19:19
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
13樓
回應

皮皮快跑
檢舉此回應
接著我來把上面的二種範例都改將資料由外部採用ajax的get形式進來。
(其實了解這個形式,我想用post送資料出去去取回所需要的資料就不是什麼困難的事了吧。jquery的post形式請務必自行了解一下。)
首先,建立一個檔名叫做select_option.json的檔案,其內容如下:

存檔之後。
上面jquery的那個範例中的javascript code改成這樣即可:

其實比起$.ajax的複雜設定。
jquery本身有提供較簡易型的寫法。
也就是$.get,$getJSON,$.post
其格式較簡單也不太需要複雜的設置。
這部份請務必自行了解及參閱官方文件的說明。(其實很多書也會有提到)
本篇文章回覆於2016-02-23 22:03
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
14樓
最有價值解答

皮皮快跑
檢舉此回應
再來就是angularJS的部份了。
json檔案一樣是吃跟上面一樣的範例。
只是code是改成如下的樣子:

因為沒有學習過angularJS的話可能有很多地方就不是很能熟悉理解。
(唯一理解的大概就是code怎麼變得少少的了。)
和jquery不同,如果你需要使用ajax就必須在控制器宣告的時候將$http引進來才可以使用。
請參考這行:

會看到我加入了$http的宣告使用。
其實$http簡單來說也是有get和post二種簡單的寫法。
問題是出在post這件事情上。由於網路資料比較少有詳盡解說所以我特別拉出來講。
jquery的ajax的post是一般標準的post格式送出,所以不論是php還是其他的網頁語言都能夠用標準接收post的方式去取得資料。
但是angularJS並非如此,他在底層似乎是走application/json這個格式。
這會導致後端程式無法透過標準的post取資料格式來取回資料。
當然目前較新的php framework似乎都會對這種資料進行處理。(不過就我使用的ci是沒有為此處理的。)
面對這樣的問題,解決方式有二種。
一種像是在php使用file_get_contents('php://input');來取得header底層傳過來的文字資料再用json_decode()轉成標準php陣列。
如果你是常態性的寫入取資料標準是ok啦。但還是要記得自行處理sql_injection的文字注入問題。
另一種做法就是去改一下JS端的設置。
其格式如下:(簡單來說就也只是多加個幾行,讓送出的資料重新成為標準的post格式)


主要就是在於如下的格式:

能夠將要post出去的資料轉成標準的post格式。這樣就不用擔心後端程式碼的post會接不到資料的問題了。

好吧!後面的東西相對難度可以稍微高了許多。
所以我的建議是可以的話好好的把這些範例都先執行一次看看。
當然我最好的建議就是去看一下官網對於angularJS的介紹。
再找找其他人寫的angulaJS學習資源。
有一個不錯教學,我提供個連結吧。
it邦鐵人賽-angularJS,作者:iamya
本篇文章回覆於2016-02-23 22:31
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
15樓
回應

皮皮快跑
檢舉此回應
剛剛再把code更加簡化,也就是把一些可以在html設定的東西設定一下,js的code就完全省到只剩下必要的資料處理了。
把html中的第一個select那行改成如下:

這麼一來javascript的code就只剩下這樣了:


呼~~~~晚上寫的這些基本範例都可以拿來寫一篇blog文章了。
有時間再轉過去好了。
本篇文章回覆於2016-02-23 22:38
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   

回覆
如要回應,請先登入.