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

问题描述

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

我希望第二个下拉菜单中的值取决于第一个
这里是我目前的代码：

 < body> 
< form method ='index.php'action ='post'> 
 
类别：< select id =idname =category> 
<？php 
 $ qry = mysql_query（SELECT * FROM categ，$ con）; 
 while（$ rs = mysql_fetch_object（$ qry））{
 echo< option id ='。$ rs-> categid。'> 。$ RS-> categname。 < /选项> 中; 
} 
？> 
< / select> 
< br> 
子类别：< select id =idname =subcategory> 
<？php 
 $ qry = mysql_query（SELECT * FROM serv，$ con）; 
 while（$ rs = mysql_fetch_object（$ qry））{
 echo< option id ='。$ rs-> servid。'> 。$ RS-> servname。 < /选项> 中; 
} 
？> 
< / 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; 
 
  -  
  - 表categ`的转储数据
  -  
 
插入`categ`（`categid`，`categname` ）价值
（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; 
 
  -  
  - 转储表`serv`的数据
  -  
 
插入`serv`（`servid`，`servname` ，'categid`）VALUES 
（1，'haaaanndddd massage'，1），
（2，'footssppaa'，2）; 
  

解决方案

下面是一个可以自定义的示例，你要。从本质上讲，您可以使用jQuery / AJAX来实现这一点。

下面的示例创建了第二个下拉框，其中填充了找到的值。如果你一行一行地遵循逻辑，你会发现它确实很简单。我留下了几条评论意见，如果没有注释（一次一个），它会告诉你脚本在每个阶段都在做什么。

FILE 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'）; 
 $ b $（'＃stSelect'）。change（function（）{
 var sel_stud = $（this）.val（）; 
 // alert（'You pick：'+ sel_stud）; 
 
 $ .ajax（{
 type： POST，
 url：another_php_file.php，
 data：'theOption ='+ sel_stud，
成功：函数（whatigot）{
 // alert（'Server- （+）; 
 $（'＃LaDIV'）。html（whatigot）; 
 $（'＃theButton'）。click（function（）{
 alert（'您点击了按钮'）; 
}）; 
} // END success fn 
））; // END $ .ajax 
}）; // END下拉更改事件
}）; // END document.ready 
< / script> 
< / head> 
< body> 
 
 < option value =>请选择< / 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 
 
 //登录到数据库（通常这存储在一个单独的php文件中并包含在每个需要的文件中）
 $ server ='localhost'; // localhost是服务器的常用名称，如果apache / Linux。 
 $ login ='root'; 
 $ pword =''; 
 $ dbname ='test'; 
 mysql_connect（$ server，$ login，$ pword）或die（$ connect_error）; //或死（mysql_error（））; 
 mysql_select_db（$ dbname）或die（$ connect_error）; 
 
 //获取由ajax发布的值
 $ selStudent = $ _POST ['theOption']; 
 //死（'您发送：'。$ selStudent）; 
 
 //运行数据库查询
 $ query =SELECT * FROM`category` WHERE`master` = 0; 
 $ result = mysql_query（$ query）或者死（'Fn another_php_file.php错误：'。mysql_error（））; 
 $ num_rows_returned = mysql_num_rows（$ result）; 
 // die（'Query returned'。$ num_rows_returned。'rows。'）; 
 
 //准备回应html标记
 $ r ='
< h1>在数据库中找到：< / h1> 
< select> 
'; 
 
 //解析mysql结果并创建响应字符串。如果（$ num_rows_returned> 0）{
 while（$ row = mysql_fetch_assoc（$ result））{
 $（
）），响应可以是一个html表，一个完整页面或几个字符
 r = $ r。 '< option value =''。$ row ['id']。'>'。 $ row ['name']。 < /选项>; 
} 
}其他{
 $ r ='< p>没有学生在该名称上的员工< / p>'; 
} 
 
 //添加额外的按钮以获得乐趣
 $ r = $ r。 '< / select>< button id =theButton>点击我< /按钮>'; 
 
 //下面回显的响应将被插入
 echo $ r; 
  
 
 
 
 
 
 
回答常见问题：你好吗？使第二个下拉框填充仅与第一个下拉框中的选定选项相关的字段？
 
 
 
 A。在第一个下拉菜单的 .change 事件中，您读取了第一个下拉框的值： 
 
 
  
 $（'＃dropdown_id'）。change（function（）{
 
 var dd1 = $（'＃dropdown_id'）。val（）; 
 
）
  
 
 
 在上述 .change（）事件中，您将该变量包含在您发送到第二个.PHP文件的数据中（在我们的例子中为another_php_file.php）
 
  C。你在你的mysql查询中使用了这个传入的变量，从而限制了你的结果，然后这些结果被传回给AJAX函数，你可以在 success中访问它们：部分的AJAX函数
 
 
 在成功函数中，您使用修改的SELECT值将代码注入到DOM中。
 
 
  
 
 
 上述示例的工作方式如下：  
 
 
 
 
 
用户选择一个学生姓名，它激发jQuery  .change（）选择器
  
 
 
下面是抓取用户选择的选项的路线：
 
 $ b 
  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> 
，然后在这里（这里，上面）使用它。
  code>代码块，将HTML存储在名为 $ r 的变量中。当HTML完全构建完成后，我将定制代码简单回传给AJAX例程： 
 
 
  echo $ r; < SELECT> 代码块）为：code> 
 在AJAX  success：function（）{// code block} 中我们可以使用它，我可以在这里将它注入到DOM中：
 
 
  $（'＃LaDIV'）。html（whatigot）;  
  
 
另外，您现在可以看到第二个下拉控件按照第一个下拉控件的选项自定义。
 
 
 
像一个非微软浏览器。 
how can i do this. if i select in first dropdown hand spa, hand massage should only appear in the second dropdown.

i want  the values in my second dropdown will depend on the first
here is my current code:
<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>
here is my database
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);

解决方案
Here is an example that you can customize to do what you want. Essentially, you can use jQuery / AJAX to accomplish this.

The example below creates a second drop-down box, populated with the values found. If you follow the logic line by line, you will see it is actually quite simple. I left in several commented-out lines that, if uncommented (one at a time) will show you what the script is doing at each stage.

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




To answer the usual question: "How do you make the 2nd drop down box populate fields that are only relevant to a selected option from the 1st drop down box?"

A.  Inside the .change event for the first dropdown, you read the value of the first dropdown box:


    $('#dropdown_id').change(function() {

        var dd1 = $('#dropdown_id').val();

    }


B.  In your AJAX code for the above .change() event, you include that variable in the data you are sending to the 2nd .PHP file (in our case, "another_php_file.php")

C.  You use that passed-in variable in your mysql query, thereby limiting your results. These results are then passed back to the AJAX function and you can access them in the success: portion of the AJAX function

D.  In that success function, you inject code into the DOM with the revised SELECT values.



This is how the above example works:

The user chooses a student name, which fires the jQuery .change() selector
Here is the line where it grabs the option selected by the user:

var sel_stud = $(this).val();
This value is sent to another_php_file.php, via this line of the AJAX code:

data: 'theOption=' + sel_stud,
The receiving file another_php_file.php receives the user's selection here:

$selStudent = $_POST['theOption'];
Var $selStudent (the user's selection posted in via AJAX) is used in the mysql search:

$query = " SELECT * FROM `category` WHERE `master` = 0 AND `name` = '$selStudent' ";

(When changing the example to suit your database, the reference to $selStudent was removed. But this (here, above) is how you would use it).
We now build a new <SELECT> code block, storing the HTML in a variable called $r. When the HTML is fully built, I return the customized code back to the AJAX routine simply by echoing it back:

echo $r;
The received data (the customized <SELECT> code block) is available to us inside the AJAX success: function() {//code block}, and I can inject it into the DOM here:

$('#LaDIV').html(whatigot);
And voila, you now see a second dropdown control customized with values specific to the choice from the first dropdown control.

Works like a non-Microsoft browser.

                        
这篇关于下拉选项依赖于另一个下拉选项（来自数据库的所有值）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.