[英]Second select box populate from first selectbox in jquery
i want to populate second select box name 'ctype' from the value of first select box. 我想从第一个选择框的值填充第二个选择框名称“ ctype”。 but the problem,still not display the value that i attach...i dont know how..now already 2 weeks i try to solved..but still nothing to display in second select box.. 但问题,仍然没有显示我附加的值...我不知道如何。现在我已经尝试解决2周了。但是在第二个选择框中仍然没有任何显示。
cash.php cash.php
on the first select box 在第一个选择框上
<?php $qryselect = mysql_query("select * from cc_merchant"); ?>
<select id="merchant" name="merchant" style="font:25px Arial, Helvetica, sans-serif; font-weight:bold; color:#000000;">
<option value=''>--Choose One--</option>
<?php while($getrow=mysql_fetch_array($qryselect)) {?>
<option value="<?php echo $getrow['merchant_id']; ?>" ><?php echo $getrow['bank_merchant']; ?></option>
<?php } ?>
</select>
second selectbox 第二个选择框
<p id="ctype">
<select id="ctype_id" name="ctype_id" style="font:25px Arial, Helvetica, sans-serif; font-weight:bold; color:#000000;">
<option value="">--Choose One--</option>
</select>
</p>
jquery jQuery的
<script type="text/javascript">
$("#merchant").selectbox({
onChange:function(val,inst){
$.ajax({
type:"GET",
data:{merchant:val},
url:"getctype.php",
success:function(data){
$("#ctype").html(data);
$("#ctype_id").selectbox();
}
});
},
});
</script>
script getctype.php 脚本getctype.php
<?php
session_start();
require_once("dbcon.php");
$target = $_GET['merchant'];
$sql = mysql_query("select card from card_support where merchant_id = '$target'");
$getmerchant = mysql_fetch_assoc($sql);
$card = $getmerchant['card'];
echo $card."\n";
?>
this is the example that i follow...the value from the first select box populate to second select box... http://www.bulgaria-web-developers.com/projects/javascript/selectbox/index.php 这是我遵循的示例...第一个选择框的值填充到第二个选择框... http://www.bulgaria-web-developers.com/projects/javascript/selectbox/index.php
First, you getctype.php is asking the database and return only one card. 首先,您的getctype.php正在询问数据库,并且仅返回一张卡。 May be you should iterate on the result in order to return multiple values. 可能您应该迭代结果以返回多个值。 Moreover, it is recommended to return JSON data (which will be easyly managed by the Javascript). 此外,建议返回JSON数据(可通过Javascript轻松管理)。 You can do this work with a piece of code like 您可以使用如下代码来完成这项工作
<?php
// start the session and load your libs
session_start();
require_once("dbcon.php");
// Ask DB for result and store them in an array
$sql = mysql_query("select card from card_support where merchant_id = '$target'");
$result = array();
while($getmerchant = mysql_fetch_assoc($sql))
$result[] = $getmerchant;
// Send JSON header (no cache)
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
// Finally return the array in JSON format
echo json_encode($result);
The data returned by the PHP script will be a JSON response like: PHP脚本返回的数据将是JSON响应,例如:
["card1","card2","card3",....]
Secondly, when we look at you AJAX call, the success function is replacing the HTMLElement with the id ctype 其次,当我们查看您的AJAX调用时,成功函数是将HTMLElement替换为id ctype
$("#ctype").html(data);
The HTMLElement with the id ctype is a <p>
, so the content of the <p>
is completely replaces with your raw content (the card value), wich is not a . 与ID CTYPE的HTMLElement是<p>
所以的内容<p>
是完全与原始内容(卡值)取代,至极不是。 Then, your second line of code: 然后,第二行代码:
$("#ctype_id").selectbox();
will not have any effect because the does not exist anymore (replaced by the content return from the AJAX call). 不会有任何效果,因为不再存在(由AJAX调用返回的内容代替)。
To make it work, you can use this secon piece of code in JS: 要使其工作,您可以在JS中使用以下secon代码段:
// Assume the second select is already a **selectbox**
// Make the first select a selectbox
$("#merchant").selectbox({
onChange:function(val,inst){
// Run the ajax call to refresh the content of the second selectbox
$.ajax({
type: "GET",
data: { merchant: val },
url:"getctype.php",
dataType: 'json',
success: function(data) {
// Remove previous content of your second selectbox
$("#ctype_id").empty();
// Append default option
$("#ctype_id").append($('<option value="">-- Chose one --</option>'));
// Loop on your data (which is an array)
for(var i = 0 ; i < data.length ; i++)
{
$("#ctype_id").append($(document.createElement("option"))
.val(data[i])
.html(data[i]));
}
}
});
}
});
if you use jquery, i should do the following: 如果您使用jquery,则应执行以下操作:
$("#merchant").on('change', function() {
$('#ctype_id').empty();
$.get('getctype.php', function(data) {
$(data).appendTo('#ctype_id');
});
});
You php code would be something like this: 您的php代码将如下所示:
echo '<option value="">--Choose One--</option>'
$sql = mysql_query("select card from card_support where merchant_id = '$target'");
$getmerchant = mysql_fetch_assoc($sql);
$card = $getmerchant['card'];
echo '<option value="'.$card.'">'.$card.'</option>';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.