iT邦幫忙

0

【PHP 的三層連動下拉???】

我有一個資料庫 叫 door
內容如下

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8mb4 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;

-- 導出 door 的資料庫結構
CREATE DATABASE IF NOT EXISTS `door` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `door`;


-- 導出  表 door.machine 結構
CREATE TABLE IF NOT EXISTS `machine` (
  `district` varchar(50) DEFAULT NULL,
  `machine` varchar(100) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- 正在導出表  door.machine 的資料:~2 rows (大約)
/*!40000 ALTER TABLE `machine` DISABLE KEYS */;
INSERT INTO `machine` (`district`, `machine`) VALUES
	('PC', 'PC_1F'),
	('PC', 'PC_6F');
/*!40000 ALTER TABLE `machine` ENABLE KEYS */;


-- 導出  表 door.people 結構
CREATE TABLE IF NOT EXISTS `people` (
  `center` varchar(50) NOT NULL,
  `unit` varchar(50) NOT NULL,
  `name` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- 正在導出表  door.people 的資料:~4 rows (大約)
/*!40000 ALTER TABLE `people` DISABLE KEYS */;
INSERT INTO `people` (`center`, `unit`, `name`) VALUES
	('A', '00', '林xx'),
	('A', '07', '葉xx'),
	('B', '00', '石xx'),
	('B', '01', '張xx'),
	('A', '07', '鄭xx'),
	('A', '07', '吳xx');
/*!40000 ALTER TABLE `people` ENABLE KEYS */;
/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */;
/*!40014 SET FOREIGN_KEY_CHECKS=IF(@OLD_FOREIGN_KEY_CHECKS IS NULL, 1, @OLD_FOREIGN_KEY_CHECKS) */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

我希望能弄出一個 動態的三層下拉選單
第一層(從資料庫query出有那些center,目前是只有A、B,這個我會,假設選了A好了)
第二層(會帶出00和07的下拉選項,假設選了07)
第三層(會帶出葉xx,鄭xx,吳xx三個人的下拉)

其實 query 的語法我都會
只是這個牽扯到 javascript 的語法

_<
不知道有沒有什麼方法
可以讓我做出我要的那個功能呢
謝謝大家

2
老鷹(eagle)
iT邦高手 1 級 ‧ 2015-08-03 16:10:25
最佳解答

我這邊有個JQuery的解法給你參考一下,
我這邊不做資料庫的示範,我使用陣列先取代.
我底下有三個檔案 a and b.php 為AJAX,
c.php為HTML + JQuery部分,
希望有幫助您學習到AJAX部分

a.php

&lt;pre class="c" name="code">
&lt;?php
if($_POST['type'] == 'A'){
    $a = [1,2,3,4,5,9,7];
}else{
    $a = [8,9,10,11,12,13,14];
}

echo json_encode($a);

b.php

&lt;pre class="c" name="code">&lt;?php
if($_POST['num'] == 0){
    echo json_encode(['ken']);
}elseif($_POST['num'] == 2){
    echo json_encode(['joe','ted']);
}else{
    echo json_encode(['sam']);
}

c.php

&lt;pre class="c" name="code">

    &lt;script src="//code.jquery.com/jquery-1.11.3.min.js">&lt;/script>


&lt;select name="type" id="type">
    &lt;option value="A">A&lt;/option>
    &lt;option value="B">B&lt;/option>
&lt;/select>
&lt;select name="num" id="num">

&lt;/select>

&lt;div id="name">

&lt;/div>

&lt;script>
    $(function(){
        $('#type').blur(function(){
            $.post('a.php',{type:$('#type').val()},function(data){
                var loan = data.length;
                var type_html = '';
                for(var i = 0;i&lt;loan;i++){
                    type_html += '&lt;option value="'+data[i]+'">'+data[i]+'&lt;/option>';
                }
                $('#num').html(type_html);

                $('#num').blur(function(){
                    $.post('b.php',{num:$('#num').val()},function(data){
                        var loan = data.length;
                        var name_html = '';
                        for(var i = 0;i&lt;loan;i++){
                            name_html += '&lt;p>'+data[i]+'&lt;/p>';
                        }
                        $('#name').html(name_html);
                    },'json');
                });


            },'json');

        });
    });
&lt;/script>
看更多先前的回應...收起先前的回應...
andyto202 iT邦研究生 4 級 ‧ 2015-08-03 18:01:34 檢舉

您好
我的範例我有試了
但是下拉只有第一個 A 和 B

_<

以此類推下去,明天我在補一下第三層!

外獅佬 iT邦大師 1 級 ‧ 2015-08-04 09:10:50 檢舉

chingfeng提到:
推下去

汗...

我不推母獅的....請外獅佬放心....母鷹(推~~!臉紅

c.php 修改分段1(字數限制)

&lt;pre class="c" name="code">


    &lt;script src="//code.jquery.com/jquery-1.11.3.min.js">&lt;/script>


&lt;select name="type" id="type">
    &lt;option value="A">A&lt;/option>
    &lt;option value="B">B&lt;/option>
&lt;/select>
&lt;select name="num" id="num">

&lt;/select>

&lt;select name="name" id="name">

&lt;/select>

c.php 修改分段2(字數限制)

&lt;pre class="c" name="code">&lt;script>
    $(function(){
        $('#type').blur(function(){
            $.post('a.php',{type:$('#type').val()},function(data){
                var loan = data.length;
                var type_html = '';
                for(var i = 0;i&lt;loan;i++){
                    type_html += '&lt;option value="'+data[i]+'">'+data[i]+'&lt;/option>';
                }
                $('#num').html(type_html);

                $('#num').blur(function(){
                    $.post('b.php',{num:$('#num').val()},function(data){
                        var loan = data.length;
                        var name_html = '';
                        for(var i = 0;i&lt;loan;i++){
                            name_html += '&lt;option value="'+data[i]+'">'+data[i]+'&lt;/option>';
                        }
                        $('#name').html(name_html);
                    },'json');
                });


            },'json');

        });
    });
&lt;/script>
2
dj31416
iT邦新手 5 級 ‧ 2015-08-02 23:23:32

如果你用jquery 的話 綁定 select 的 change事件
當有change的時候 丟出ajax 給server端要資料
要完資料 在ajax的callback 處理server丟回來的資料 再去更動select的內容
大概是這樣 :)

2
weiclin
iT邦高手 4 級 ‧ 2015-08-03 10:31:28

這一篇剛好就是你要的
http://cfarm.blog.aznc.cc/jquery-ui-autocomplete-%E4%BD%BF%E7%94%A8%E5%A4%9A%E5%80%8B%E6%AC%84%E4%BD%8D%E5%81%9A%E6%9F%A5%E8%A9%A2/

他的原理, 是在跟 server 要資料時, 順便將目前欄位選擇的內容也丟給 server
這樣子 server 就可以用這些資料當作搜尋條件去過濾

0
ak02
iT邦研究生 2 級 ‧ 2015-08-04 09:27:39

題外話
某業務還叫我寫五層以上
分那麼細
搞的有夠花的

我要發表回答

立即登入回答