下拉选项依赖于另一个下拉选项（数据库中的所有值）[重复]答案

【问题标题】：dropdown options is dependent from another dropdown options (all value from database) [duplicate]下拉选项依赖于另一个下拉选项（数据库中的所有值）[重复]
【发布时间】：2013-09-27 19:07:50
【问题描述】：

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

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

<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);

【问题讨论】：

我认为这可以使用 AJAX 轻松完成。你试过吗？
还没有，先生。先生，我对此一无所知。但我会做研究
看看这是否有帮助：stackoverflow.com/questions/15356291/…
谢谢大家。我会尝试所有这些
this your question is simple logic, you needs to creat some function which detect the select action so when select first select then for the select you will want to have somthing like this: servid."'>" .$rs->servname.""; } ?>

标签： javascript php html

【解决方案1】：

这是一个示例，您可以自定义以执行您想要的操作。本质上，您可以使用 jQuery / AJAX 来完成此操作。

下面的示例创建了第二个下拉框，其中填充了找到的值。如果您逐行遵循逻辑，您会发现它实际上非常简单。我留下了几行注释掉的行，如果未注释（一次一个），将向您显示脚本在每个阶段所做的事情。

文件 1 -- TESTER.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;

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

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

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

B.在上述.change() 事件的 AJAX 代码中，您将该变量包含在发送到第二个 .PHP 文件（在我们的例子中为“another_php_file.php”）的数据中

C.您在 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 = " SELECT * FROM `category` WHERE `master` = 0 AND `name` = '$selStudent' ";

（在更改示例以适合您的数据库时，删除了对 $selStudent 的引用。但这（此处，上方）是您将如何使用它）。
我们现在构建一个新的 <SELECT> 代码块，将 HTML 存储在一个名为 $r 的变量中。当 HTML 完全构建完成后，我将自定义代码返回给 AJAX 例程，只需将其回显即可：

echo $r;
接收到的数据（自定义的<SELECT> 代码块）在AJAX success: function() {//code block} 中可供我们使用，我可以在这里将其注入到DOM 中：

$('#LaDIV').html(whatigot);

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

像非微软浏览器一样工作。

【讨论】：

这是一个很棒的解决方案，先生。非常感谢！

【解决方案2】：

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

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

<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>

【讨论】：