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

Question

我想从第一个选择框的值中填充第二个选择框名称“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

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

Answer 2

如果你使用 jquery，我应该执行以下操作：

 $("#merchant").on('change', function() {

 $('#ctype_id').empty();
 $.get('getctype.php', function(data) {
 $(data).appendTo('#ctype_id');

 });
 });

你的 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>';