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

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

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

最佳答案

首先，您的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中使用以下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]));
                }
            }
        });
    }
});

关于php - jQuery中的第一个选择框填充第二个选择框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13872213/