php - 第二个选择框从 jquery 中的第一个选择框填充

Question

我想从第一个选择框的值填充第二个选择框名称“ctype”。但是问题，仍然没有显示我附加的值...我不知道怎么办...现在已经两周了我尝试解决..但在第二个选择框中仍然没有显示任何内容..

现金.php

在第一个选择框

<?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>

第二个选择框

<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

<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>

脚本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";
?>

这是我遵循的示例...第一个选择框的值填充到第二个选择框... http://www.bulgaria-web-developers.com/projects/javascript/selectbox/index.php

Answer 1

首先，您getctype.php正在询问数据库并返回仅一张卡片。也许您应该迭代结果才能返回多个值。此外，建议返回 JSON 数据(这将很容易由 Javascript 管理)。您可以使用如下代码来完成这项工作

<?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);

PHP 脚本返回的数据将是一个 JSON 响应，如下所示:

["card1","card2","card3",....]

其次，当我们查看您的 AJAX 调用时，成功函数是将 HTMLElement 替换为 id ctype

$("#ctype").html(data);

id为ctype的HTMLElement是<p> ，所以 <p> 的内容完全替换为您的原始内容(卡值)，这不是 .然后，你的第二行代码:

$("#ctype_id").selectbox();

不会有任何影响，因为 不再存在(由 AJAX 调用返回的内容替换)。

要使其正常工作，您可以在 JS 中使用第二段代码:

// 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]));
                }
            }
        });
    }
});