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

三層連動下拉

andyto202 2015-08-02 23:12:09 ‧ 7985 瀏覽

分享至

我有一個資料庫叫 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 的語法

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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

老鷹(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>

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

andyto202 iT邦研究生 4 級 ‧ 2015-08-03 18:01:34 檢舉

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

_<

老鷹(eagle) iT邦高手 1 級 ‧ 2015-08-03 22:56:40 檢舉

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

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

chingfeng提到：
推下去

...

老鷹(eagle) iT邦高手 1 級 ‧ 2015-08-04 09:29:38 檢舉

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

老鷹(eagle) iT邦高手 1 級 ‧ 2015-08-04 09:35:58 檢舉

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>

老鷹(eagle) iT邦高手 1 級 ‧ 2015-08-04 09:36:21 檢舉

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>

登入發表回應