下拉选项依赖于另一个下拉选项(所有值都来自数据库） - dropdown options is dependent from another dropdown options (all value from database)

我该怎么做。如果我在第一个下拉菜单中选择手部水疗，手部按摩应该只出现在第二个下拉菜单中。

我希望第二个下拉列表中的值将取决于第一个这是我当前的代码：

<body>
<form method='index.php' action='post'>
    Category:  <select id="id" name="category">
    <?php
        $qry=mysql_query("SELECT * FROM categ",$con);
        while($rs = mysql_fetch_object($qry)){
            echo "<option id='".$rs->categid."'>" .$rs->categname."</option>";
        }
    ?>
    </select>
<br>
    sub categ:  <select id="id" name="subcategory">
    <?php
        $qry=mysql_query("SELECT * FROM serv",$con);
        while($rs = mysql_fetch_object($qry)){
            echo "<option id='".$rs->servid."'>" .$rs->servname."</option>";
        }
    ?>
    </select>
</form>
</body>

这是我的数据库

CREATE TABLE IF NOT EXISTS `categ` (
  `categid` int(11) NOT NULL AUTO_INCREMENT,
  `categname` varchar(255) NOT NULL,
  PRIMARY KEY (`categid`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
--
-- Dumping data for table `categ`
--
INSERT INTO `categ` (`categid`, `categname`) VALUES
(1, 'hand spa'),
(2, 'foot spa');

CREATE TABLE IF NOT EXISTS `serv` (
  `servid` int(11) NOT NULL AUTO_INCREMENT,
  `servname` varchar(255) NOT NULL,
  `categid` int(11) NOT NULL,
  PRIMARY KEY (`servid`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
--
-- Dumping data for table `serv`
--
INSERT INTO `serv` (`servid`, `servname`, `categid`) VALUES
(1, 'haaaanndddd massage', 1),
(2, 'footssppaa', 2);

下面是一个示例，您可以自定义该示例以执行所需的操作。本质上，你可以使用jQuery/AJAX来实现这一点。

下面的示例创建第二个下拉框，其中填充了找到的值。如果你一行一行地按照逻辑，你会发现它实际上很简单。我留下了几行注释掉的行，如果未注释(一次一个(，将向您显示脚本在每个阶段的作用。

文件 1 -- 测试器。.PHP

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
//alert('Document is ready');
                $('#stSelect').change(function() {
                    var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);
                    $.ajax({
                        type: "POST",
                        url: "another_php_file.php",
                        data: 'theOption=' + sel_stud,
                        success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
                            $('#LaDIV').html(whatigot);
                            $('#theButton').click(function() {
                                alert('You clicked the button');
                            });
                        } //END success fn
                    }); //END $.ajax
                }); //END dropdown change event
            }); //END document.ready
        </script>
    </head>
<body>
    <select name="students" id="stSelect">
        <option value="">Please Select</option>
        <option value="John">John Doe</option>
        <option value="Mike">Mike Williams</option>
        <option value="Chris">Chris Edwards</option>
    </select>
    <div id="LaDIV"></div>
</body>
</html>

文件 2 - another_php_file.php

<?php
//Login to database (usually this is stored in a separate php file and included in each file where required)
    $server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
    $login = 'root';
    $pword = '';
    $dbname = 'test';
    mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
    mysql_select_db($dbname) or die($connect_error);
//Get value posted in by ajax
    $selStudent = $_POST['theOption'];
    //die('You sent: ' . $selStudent);
//Run DB query
    $query = "SELECT * FROM `category` WHERE `master` = 0";
    $result = mysql_query($query) or die('Fn another_php_file.php ERROR: ' . mysql_error());
    $num_rows_returned = mysql_num_rows($result);
    //die('Query returned ' . $num_rows_returned . ' rows.');
//Prepare response html markup
    $r = '  
            <h1>Found in Database:</h1>
            <select>
    ';
//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
    if ($num_rows_returned > 0) {
        while ($row = mysql_fetch_assoc($result)) {
            $r = $r . '<option value="' .$row['id']. '">' . $row['name'] . '</option>';
        }
    } else {
        $r = '<p>No student by that name on staff</p>';
    }
//Add this extra button for fun
    $r = $r . '</select><button id="theButton">Click Me</button>';
//The response echoed below will be inserted into the 
    echo $r;

回答通常的问题："如何使第二个下拉框填充仅与第一个下拉框中的选定选项相关的字段？

一个。在第一个下拉列表的 .change 事件中，读取第一个下拉列表框的值：

$('#dropdown_id').change(function() { var dd1 = $('#dropdown_id').val(); }

二. 在上述.change()事件的 AJAX 代码中，将该变量包含在要发送到第二个 .PHP 文件(在我们的例子中，"another_php_file.php"(

三. 您可以在 mysql 查询中使用该传入的变量，从而限制您的结果。然后将这些结果传递回 AJAX 函数，您可以在 AJAX 函数的success:部分中访问它们

D. 在该成功函数中，您将代码注入具有修订后的 SELECT 值的 DOM 中。

这是上面示例的工作原理：

用户选择一个学生姓名，这将触发 jQuery .change()选择器
这是它抓取用户选择的选项的行：
var sel_stud = $(this).val();
此值通过 AJAX 代码的以下行发送到 another_php_file.php：
data: 'theOption=' + sel_stud,
接收文件another_php_file.php接收用户的选择：
$selStudent = $_POST['theOption'];
Var $selStudent(用户通过AJAX发布的选择(用于mysql搜索：
$query =" 从'类别'中选择 *，其中'主'= 0 和'名称' = '$selStudent'";
(更改示例以适合您的数据库时，删除了对$selStudent的引用。但这(这里，上面(是你将如何使用它(。
我们现在构建一个新的<SELECT>代码块，将 HTML 存储在一个名为 $r 的变量中。当 HTML 完全构建时，我只需将其回显即可将自定义代码返回到 AJAX 例程：
echo $r;
接收到的数据(自定义<SELECT>代码块(在 AJAX success: function() {//code block} 中可供我们使用，我可以在这里将其注入到 DOM 中：
$('#LaDIV').html(whatigot);

瞧，您现在看到第二个下拉列表控件，该控件使用特定于第一个下拉列表控件中的选项的值进行自定义。

工作方式类似于非Microsoft浏览器。

如果我清楚地了解了您的问题，您可以研究此代码并对其进行自定义以满足您的需求。它简单明了：

假设我们的目的是管理电影

<label>Movie Category</label>
    <select name="movieCategory" id="movieCategory">
                <option value="">--- S e l e c t ---</option>
               <?php
    $movieCategory= array("Action","Romance","Horror","Comedy","Music","Interviews");
    reset($movieCategory);
    while (list($key ,  $value) = each($movieCategory)) {
         echo " <option id='".$value."' value='".$value."'>".$value."</option>";
    }
    ?>           
              </select>
              <br>
          <label>Movie SubCategory</label>
              <select name="subCategory" id="subCategory">
                <option value="">--- S e l e c t ---</option>
               <?php
    $subCategory= array("Action","Romance","Horror","Comedy","Music","Interviews");
    reset($subCategory);
    while (list($key ,  $subvalue) = each($subCategory)) {
         echo " <option id='".$subvalue."' value='".$subvalue."'>".$subvalue."</option>";
    }

    ?>
              </select>
    <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script language="javascript" type="text/javascript">
    $(function () {
    $('select#movieCategory').change(function(){
    $('select#subCategory  option#'+$(this).val()).attr( "selected" , "selected"  )
    });

    });
</script>