从下拉列表中选择值，第二个下拉列表自动更改答案

【问题标题】：Select value from drop down list and second drop down list auto changed从下拉列表中选择值，第二个下拉列表自动更改
【发布时间】：2017-03-08 17:23:09
【问题描述】：

我的数据库中有一个名为 company 的表，在 company 表内有 3 列名称 Id、Company_Name 和 location。我有两个下拉列表。第一个下拉列表仅显示公司名称，并且根据公司名称位置将在第二个下拉列表中更改。我做了一些代码，但在第二个下拉菜单中我得到了所有位置名称。

<?php


//$comp=$_POST['Company'];
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demo_db";


    //open connection to mysql db
    $connection = mysqli_connect($servername,$username,$password,$dbname) or die("Error " . mysqli_error($connection));

    //fetch table rows from mysql db
    $sql = "select * from company";// it displaying all company name in my first drop down list
    $result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));


if (isset($_POST['Company'])) {

    $name=$_POST['Company'];
    $sql = "select * from company where Company_name=$name";

}
    $result_loc = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));


    //close the db connection
    mysqli_close($connection);


?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 

    <select onchange='this.form.submit();' name="Company">
            <option value="Select your Location1" disabled selected>Select your company</option>
            <?php while($row = mysqli_fetch_array($result)):;?>
            <option value="<?php echo $row[1];?>"><?php echo $row[1];?></option>
            <?php endwhile;?>
    </select>

 <select>
            <option value="" disabled selected>Select your location</option>
             <?php while($row = mysqli_fetch_array($result_loc)):;?>
            <option value="<?php echo $row[2];?>"><?php echo $row[2];?></option>
        <?php endwhile;?>
 </select>



</body>
</html>

【问题讨论】：

在这个网站上查看：plus2net.com/php_tutorial/ajax_drop_down_list.php
首先 - SELECT 菜单不在表单内，因此 onchange 事件处理程序将不正确，其次使用 Ajax 函数发送将用于查询数据库的请求 ( POST )获取第二个（依赖）SELECT 菜单的内容。
在更改第一个选择框时，您必须进行 ajax 调用并在 ajax 文件中找到位置，然后从响应中将位置绑定到第二个下拉列表。
是的，我之前检查过，但仍然遇到问题
我们可以不用 Ajax 吗？

标签： php jquery html mysql drop-down-menu

【解决方案1】：

为了帮助您使用 ajax 链接 SELECT 菜单，以下内容可能很有用 - 您应该能够修改它以适合您的数据库结构和命名约定。您可以“按原样”运行此程序以查看结果 - 希望它会被证明是有用的。

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) ){

        $action=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING );
        $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_NUMBER_INT );

        if( $action && $id && !is_nan( $id ) ){
            $sql='select * from table where id=?';
            /* etc ~ generic sql example only ! */

            /* query db*/

            /* process recordset and build menu data */



            /* 
                demo response sent back to aajx callback
                In reality this would be dynamically generated with
                results from the db query above.
            */
            for( $i=0; $i < 10; $i++ )echo "<option value='Location-$id-$i'>Location-$id-$i";
        }
        exit();
    }
?>
<!doctype html>
<html>
    <head>
        <title>Dependent / Chained SELECT menus</title>
        <script type='text/javascript' charset='utf-8'>
            /* Basic Ajax function */
            function ajax(m,u,p,c,o){
                /*
                    m=Method,
                    u=Url,
                    p=Params,
                    c=Callback,
                    o=Options
                */
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() );
                };

                var params=[];
                for( var n in p )params.push(n+'='+p[n]);

                switch( m.toLowerCase() ){
                    case 'post': p=params.join('&'); break;
                    case 'get': u+='?'+params.join('&'); p=null; break;
                }

                xhr.open( m.toUpperCase(), u, true );
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send( p );
            }


            /* Callback function to populate second menu */
            function createmenu(r,o,h){
                /*
                    r=response
                    o=options ( sent by ajax function )
                    h=response headers
                */
                o.menu.innerHTML=r;
            }



            function bindEvents(){
                /* Get references to the two dropdown menus */
                var oSelCompany=document.querySelectorAll('select[name="Company"]')[0];
                var oSelLocation=document.querySelectorAll('select[name="Locations"]')[0];

                /* Assign an `onchange` event listener */
                oSelCompany.onchange=function(e){

                    var method='post';
                    var url=location.href;

                    /* the parameters to send to the PHP script */
                    var params={
                        'action':'getmenu',
                        'id':this.options[ this.options.selectedIndex ].value
                    };

                    /* Options to pass to the ajax callback */
                    var opts={
                        menu:oSelLocation
                    };

                    /* make the ajax request */
                    ajax.call( this, method, url, params, createmenu, opts );

                }.bind( oSelCompany );
            }

            document.addEventListener( 'DOMContentLoaded', bindEvents,false );
        </script>
        <style type='text/css' charset='utf-8'>
            select {padding:1rem;width:300px;}
        </style>
    </head>
    <body>
        <form method='post'>
            <select name='Company'>
                <option value=1>One
                <option value=2>Two
                <option value=3>Three
                <option value=4>Four
                <option value=5>Five
            </select>
            <select name='Locations'></select>
        </form>
    </body>
</html>

【讨论】：

RamRaider 先生。感谢您的努力，但您能否以简单的方式帮助我，因为我是编程新手，您的代码太复杂了。

【解决方案2】：

我为您创建了一个演示。假设您有公司名称并且公司有多个位置示例 (id,name,location) :1,TCS,Banglore 2,TCS,Hyderabad

<?php 
 /*database connection*/ 
$con = mysqli_connect("localhost","root","root","search");
?> 
<script>
function test(name)
 {
  // new file name f1.php
var strURL = "f1.php?name="+name;
    var ax=new XMLHttpRequest();
       ax.onreadystatechange = function()
     {
        if(ax.readyState==4){
         document.getElementById("myid").innerHTML = ax.responseText;

     }
     }
         ax.open("GET",strURL, true);
         ax.send(null); 
      }
</script>
 <?php 
  $sql= mysqli_query($con,"select * from company GROUP BY name  ");
     //print_r($sql);
     ?>
        <select>
               <option value="0">select company name</option>
    <?php   while ( $row = mysqli_fetch_array($sql))
        {
           ?>
    <option onclick="test('<?php echo $row["name"]; ?>');" id="<?php echo $i++."der" ;?>"> <?php echo $row["name"]; ?></option>


       <?php  }
?>
 </select> 
 <div id="myid"></div>

现在创建一个新文件 f1.php，您可以在其中运行另一个 mysql 查询以发送您通过测试功能选择的公司名称。这里是代码

   <?php
   $con = mysqli_connect("localhost","root","root","search");
  if(isset($_GET['name']))
 {

   $name = $_GET['name'];
   }
   $sql= mysqli_query($con,"select * from company where name='$name'");
    ?>
   <select  name="city">
      <option>Select location</option>
    <?php while ($row = mysqli_fetch_array($sql))  
    { ?>
   <option value=<?php echo $row['location']?>><?php echo $row['location']?></option>
    <?php } ?>
  </select>

【讨论】：

对不起，Mr.Swapnil jain 我试过了，但没有任何反应。
您遇到了什么问题？
这是我创建的数据库 INSERT INTO company (id, name, location) VALUES (1, 'TWS', 'indore'), (2, 'TWS ', 'bhopal'), (3, 'Infosys', 'hyderabad'), (4, 'Infosys', 'banglore'), (5, 'TCS', 'pune'), (6, 'TCS', '孟买');
您正在共享您的代码。是否可以更改我的代码？
我没有分享我的代码。实际上，我已经以更简单的方式修改了您的代码，这样您就可以轻松理解流程是如何进行的。