从下拉列表中选择值，第二个下拉列表自动更改
Posted
技术标签:
【中文标题】从下拉列表中选择值，第二个下拉列表自动更改【英文标题】：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 吗？
【参考方案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 INTOcompany (id, name, location) VALUES (1, 'TWS', 'indore'), (2, 'TWS ', 'bhopal'), (3, 'Infosys', 'hyderabad'), (4, 'Infosys', 'banglore'), (5, 'TCS', 'pune'), (6, 'TCS', '孟买');
您正在共享您的代码。是否可以更改我的代码？
我没有分享我的代码。实际上，我已经以更简单的方式修改了您的代码，这样您就可以轻松理解流程是如何进行的。以上是关于从下拉列表中选择值，第二个下拉列表自动更改的主要内容，如果未能解决你的问题，请参考以下文章
根据第一个下拉列表更改第二个下拉列表，并使用 php 和数组更改第二个下拉列表的第三个下拉列表 [关闭]