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调用时，成功函数将使用id ctype替换HTMLElement

$("#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]));
                }
            }
        });
    }
});

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

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

2 个答案: