如何根据另一个下拉菜单选择更改下拉菜单选项?从数据库检索的值 [英] How to change dropdown options based on another dropdown selection? Values retrieved from the database
问题描述
我正在为此工作几天，找不到最终的解决方案.我经历了类似的SOF问题，但不知道为什么我无法解决这个问题.
I am working on this for few days and could not find a final solution. I went through similar SOF questions, but do not know why cannot I figure this out.
我有三个下拉菜单.所有值(选项)均从称为借贷主数据的表中检索.
I have three dropdowns. All values (options) are retrieved from a table called loan master.
First dropdown -> Loan type (values such as housing,personal,instant are in the table).
Second dropdown -> Loan amount (different amounts have been defined for each type)
Third dropdwon - > Interest Rate (same as second)
当用户仅从第一个下拉菜单中选择一个选项时，相关选项(并非全部)必须加载到第二个和第三个下拉菜单中
When a user selects one option from the first dropdown ONLY the relevant options (not all) must be loaded into second and third dropdowns
下面是我尝试过的代码.我首先尝试在前两个下拉列表中使用它.
Below is the code that I have attempted. I first try to make it for the first two dropdowns.
<?php
require_once "../includes/loan_master.php";
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Basic</title>
</head>
<body>
Loan Type <select id="first" name="loan_master_id" class="textInput">
<!--first dropdwon-->
<?php
$loans=$loan_master->find_by_sql("SELECT * FROM loan_master");
//this will return an array
foreach ($loans as $loan) {
echo "<option value='$loan->id'>$loan->loan_type</option> ";
}
?>
</select>
Loan Amount<select id="update">
<!--second dropdown-->
</select>
<script src="../javascripts/jquery-1.11.0.js"></script>
<script>
$(function() {
$("#first").change(function() {
var x = $("#first").val();
// first dropdown value is stored
fire_ajax(x);
});
function fire_ajax() {
$.ajax({
type: "POST",
dataType: "text",//is this data type corect?
url: "getter.php",
//getter.php is this file. All are in the same file
success: function(res) {
$("#update").html("<option>"+res+"</option>");//options are added to second dropdwon
}
})
}
});
</script>
</body>
</html>
<?php
//php code
if (isset($_POST)) {
$x=$_POST; // I feel something is wrong here
$loans=$loan_master->find_by_sql("SELECT * FROM loan_master WHERE id=".$x);
}
?>
我真的需要使此代码起作用.任何建议都将受到赞赏
I really need make this code to work. Any advice is highly appreciated
P:S 我收到的错误
P:S Errors that I get
查询失败:"where子句"中的未知列"Array" 上一次执行查询:SELECT * FROM loan_master WHERE id = Array
Query failed:Unknown column 'Array' in 'where clause' Last query performed:SELECT * FROM loan_master WHERE id=Array
注意:第68行的C:\ wamp \ www \ loan_mgmt \ admin \ getter.php中的数组到字符串的转换
Notice: Array to string conversion in C:\wamp\www\loan_mgmt\admin\getter.php on line 68
其他更新
getter.php是此文件. (相同的文件，HTML后面有一个php块).如您所说，我已经更改了代码.
getter.php is this file. (same file which has a php block after HTML). I have changed the code as you said.
<?php
if (isset($_POST["loan_master_id"])) {
$x=$_POST["loan_master_id"]; // I feel something is wrong here
$loans=$loan_master->find_by_sql("SELECT loan_amount FROM loan_master WHERE id=".$x);
foreach ($loans as $$loan) {
echo "<option value='$loan->id'>$loan->loan_amount</option>";
}
}
?>
这是成功的一部分
success: function(res) {
$("#update").html("<option>"+res+"</option>");//options are added to second dropdwon
}
我现在没有任何错误.发生的是第二个下拉列表为空.没有显示任何选项
I don't get any errors now. What happens is second dropdown is empty. No options are shown
推荐答案
好吧，来自ajax调用的结果将作为单个响应发送回.然后，您将整个响应放入单个选项标签
Well, the result from your ajax call is sent back as single response. You are then putting that whole response into a single option tag
$("#update").html("<option>"+res+"</option>");//options are added to second dropdwon
如果您的ajax调用以与上面的代码相同的方式返回响应
If your ajax call is returning a response in the same manner as your code above
foreach ($loans as $loan) {
echo <option value='$loan->id'>$loan->loan_type</option>";
}
然后您可以做类似...
Then you can just do something like...
document.getElementById('update').innerHTML=res;
编辑
关于您的错误，我需要查看getter.php来给您确切的说明，但是基本上它是在说它无法在数据库中找到您要查找的内容.您的ajax调用没有失败，您的数据库查询也没有失败.
As for your error, I'd need to see the getter.php to give you exact instructions, but basically it is saying it can't find what you are looking for in the database. Your ajax call isn't failing, your database query is.
我的猜测是您忘记通过ajax将任何参数传递给您的getter.php代码.您可以在 http://www.w3schools.com/ajax/ajax_xmlhttprequest_send中查看如何从ajax传递信息.asp .
My guess would be you are forgetting to pass any parameters through ajax to your getter.php code. You can see how to pass info from ajax at http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp.
编辑2
您的PHP返回的单个文本字符串看起来像
Your PHP is returning a single text string that looks like
<option value='id'>bla blah</option><option value='id'>bla blah</option><option value='id'>bla blah</option><option value='id'>bla blah</option>
换句话说，所有选项都同时出现.然后，您将这些选项放入单个选项标签中.
In other words all the options at once. You are then putting those options into a single option tag.
只需执行以下操作即可检查ajax的结果...
Check the results of your ajax by just doing...
alert(res);
如果它显示的字符串是一堆选项标签，则不应将它们放在另一个选项标签中.就像选择标签一样.
If it shows you a a string that is a bunch of option tags, you shouldn't put them in another option tag. Just at them to the select tag like..
document.getElementById('update').innerHTML=res;
如果该字符串为空，并且警报未显示任何内容，则表明您的数据库查询未找到任何匹配项，并返回了空值.
If the string is empty and alert shows you nothing it means your database query didn't find any matches and returned empty.
这篇关于如何根据另一个下拉菜单选择更改下拉菜单选项?从数据库检索的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
