[英]how to get multiple data from a php and store it in select options using ajax
I have a select option from which I can select a hotel name which I get from a php
script. 我有一个选择选项,从中可以选择从
php
脚本获取的酒店名称。
And then I have another select option which shows room types based on the hotel selected from 1st select option. 然后,我还有另一个选择选项,该选项显示基于从第一个选择选项中选择的酒店的房间类型。
And when I select a hotel with the help of ajax
I only get one room type in my 2nd select option, while in my table I have multiple room types for a single hotel. 当我在
ajax
的帮助下选择一家酒店时,我的第二选择选项仅获得一种房型,而在我的餐桌上,同一家酒店则有多种房型。
My php
code for getting room types. 我的
php
代码获取房间类型。
<?php
include('mysql.php');
$h_id = $_POST['hotel_id'];
$result = mysql_query("SELECT * FROM room_type WHERE hotel_id = '$h_id'");
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$type_name = $row['type_name'];
$type_id = $row['roomtype_id'];
echo $type_name.",".$type_id;
}
exit();
?>
javascript: javascript:
jQuery(document).ready(function($){ $('#hotel_list').change(function(){ $.ajax({ type:'post', url:'roomtype_fetch.php', data: 'hotel_id='+ $(this).val(), success: function(value){ var data = value.split(","); var type_name =data[0]; var type_id =data[1]; $("#roomtype_list").html("<option value="+type_id+">"+type_name+"</option>"); } }); }); });
html for 1st select option with its php to get hotel name. 第一个选择html及其php以获得酒店名称。
<select class="form-control" name="hotel_list" id="hotel_list" onchange="cal()">
<option>--Select--</option>
<?php
$query2 = mysql_query("SELECT * FROM hotel") or die("the query cannot be completed at this moment");
if(mysql_num_rows($query2) <1) {
?>
<option>No Hotel Found!</option>
<?php
}
while($row = mysql_fetch_array($query2, MYSQL_ASSOC)){
$hotel_name = $row['hotel_name'];
$hotel_id_1 = $row['hotel_id'];
?>
<option value="<?php echo $hotel_id_1; ?>"><?php echo $hotel_name; ?></option>
<?php
}
?>
</select>
2nd select html code: 第二选择html代码:
<select class="form-control" name="roomtype_list" id="roomtype_list">
<option>--Select--</option>
</select>
Any type of help would be appreciated. 任何类型的帮助将不胜感激。
You cant directly do value.split(",") because your php output looks like: 您不能直接执行value.split(“,”),因为您的php输出如下所示:
name1,id1name2,id2name3,id3
echo does not add a new line at the end, if you change the line to: 如果将行更改为:echo不会在末尾添加新行:
echo $type_name.",".$type_id,"\n";
That would give you an output like: 这将为您提供如下输出:
name1,id1
name2,id2
name3,id3
Which then you can split by "\\n" to get an array of lines then by "," to separate name and id: 然后您可以用“ \\ n”拆分以得到一个行数组,然后用“,”分隔名称和ID:
var data = value.split(",");
data.forEach(function(line){
var type_values = line.split(",");
var type_name = type_values[0];
var type_id = type_values[1];
$("#roomtype_list").html("<option value="+type_id+">"+type_name+"</option>");
}
But anyway, I think your best option is to change your php to return JSON: 但是无论如何,我认为最好的选择是更改您的PHP以返回JSON:
$result = array();
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$result[] = $row;
}
echo json_encode($result);
Then just do something like: 然后执行以下操作:
var data = JSON.parse(value);
$("#roomtype_list").empty();
data.forEach(function(type){
$("#roomtype_list").append("<option value="+type.roomtype_id+">"+type.type_name+"</option>");
});
The first thing is, your php loop that generates the types gives a wrong output: 第一件事是,生成类型的php循环给出了错误的输出:
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){ $type_name = $row['type_name']; $type_id = $row['roomtype_id']; echo $type_name.",".$type_id; }
That gives you something like that: 那给你这样的东西:
name1,type1name2,type2name3,type3...
You should add a ;
您应该添加一个
;
or an other separator like that between, so change the echo line to: 或其他类似的分隔符,因此请将回声线更改为:
echo $type_name.",".$type_id.",";
That will give you an output like that: 那会给你这样的输出:
name1,type1;name2,type2;name3,type3...
The second thing is, that you have to loop with jquery through your received types. 第二件事是,您必须通过接收的类型与jquery循环。 You split the received string in an array:
您将接收到的字符串拆分为一个数组:
var data = value.split(",");
..and so you should do the following in your javascript success function: ..因此您应该在javascript成功函数中执行以下操作:
...
success: function(value){
var data = value.split(";");
//split all types first with ";"
$.each(data, function() {
var type = $(this).split(",");
//then split the type in name and id
var type_name = type[0];
var type_id = type[1];
//add every type to roomtype_list
$("#roomtype_list").html("<option value="+type_id+">"+type_name+"</option>");
});
}
...
Explanation: Split first all types with the separator ";"
说明:首先使用分隔符
";"
分割所有类型";"
and split then the type in name and id with ","
. 然后用
","
分割名称和ID中的类型。 I hope this helps. 我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.