使用PHP和Javascript的下拉式onchange方法 [英] Dropdown onchange method using PHP and Javascript
问题描述
我有两个下拉菜单，它们从MySQL数据库读取其数据.我使用PHP连接数据库.第二个下拉列表应根据第一个下拉列表中的选择进行填充.在我看来，该过程如下所示(如果我输入错了，请纠正我):
I have two dropdown menus that read their data from a MySQL database. I use PHP for connecting to database. The second dropdowns should get populated based on the selection on the first dropdown. The process seems as below to me (correct me if I'm wrong):
- PHP部分连接到MySQL数据库并填充dropdown1.
- 用户在dropdown1上选择一个值，然后调用onchange事件.
- 在onchange函数(它是Javascript)中，一个查询被发送到MySQL数据库，以基于dropdown1的选择来获取dropdown2的值(这里又是PHP，对吗?).
- 下拉列表2被填充.
我不知道如何同时使用Javascript和PHP来完成此任务(上面的数字3)；也许这根本不是做到这一点的方法.请指教！
I don't know how to use Javascript and PHP together in order to do this task (number 3 above); or maybe this is not the way to do it at all. Please advise!
这是我的代码.如您在下面看到的，我将Javascript函数放在我认为是错误的PHP代码中.那就是我被困住的地方！
Here is my code. As you see below, I'm putting a Javascript function within a PHP code which I suppose is wrong. That's where I got stuck!
<php
$sql="SELECT distinct category FROM table1";
$result=mysql_query($sql);
$optionsCat="";
while($row = mysql_fetch_row($result)){
$optionsCat.="<option value=\"$row[0]\">$row[0]</option>";
}
function genSubCat($catID){
$sql="SELECT distinct subcategory FROM table1 where category=".$catID;
$result=mysql_query($sql);
$optionsSubCat="";
while($row = mysql_fetch_row($result)){
$optionsSubCat.="<option value=\"$row[0]\">$row[0]</option>";
}
}
?>
<select name="catDropDown" onChange="genSubCat(this)">
<option value="0">Select category</option>
<?php echo $optionsCat?>
</select>
<select name="subcategoryDropDown">
<option value="0">Select subcategory</option>
<?php echo $optionsSubCat?>
</select>
推荐答案
在这里，我们有一个简单的页面，上面有输入内容.在其中输入一个单词，然后单击关闭的输入. Ajax将调用myphp.php脚本，并返回您在原始分区下面键入的相同单词.
Here we have a simple page with input on it. Type a word into it and then click off of the input. Ajax will call the myphp.php script and return the same word you typed in below the original division.
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#faq_search_input").blur(function(){
var faq_search_input = $(this).val();
var dataString = 'keyword='+ faq_search_input;
if(faq_search_input.length>1){
$.ajax({type: "GET", url: "myphp.php", data: dataString,
success: function(server_response) {
document.getElementById("searchresultdata").style.display = "block";
$('#searchresultdata').html(server_response).show();
}
});
}
return false;
});
});
</script>
</head>
<body>
<div class="searchholder">
<input name="query" class="quicksearch" type="text" id="faq_search_input" />
<div id="searchresultdata" class="searchresults" style="display:none;"> </div>
</div>
</body>
</html>
myphp.php:
<?PHP
echo $_GET['keyword'];
?>
这篇关于使用PHP和Javascript的下拉式onchange方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
