jQuery中的第一个选择框填充第二个选择框 [英] Second select box populate from first selectbox in jquery

问题描述

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

i want to populate second select box name 'ctype' from the value of first select box. 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..

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

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

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

推荐答案

首先，您 getctype.php 正在询问数据库，并仅返回一张卡.可能是您应该迭代结果以便返回多个值.此外，建议返回JSON数据(可通过Javascript轻松管理).您可以使用一段代码来完成这项工作，例如

First, you getctype.php is asking the database and return only one card. 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). 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);

PHP脚本返回的数据将是JSON响应，例如:

The data returned by the PHP script will be a JSON response like:

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

第二，当我们看到您的AJAX调用时，成功函数将HTMLElement替换为ID ctype

Secondly, when we look at you AJAX call, the success function is replacing the HTMLElement with the id ctype

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

ID为ctype的HTMLElement是<p>，因此<p>的内容完全替换为您的原始内容(卡值)，而不是.然后，输入第二行代码:

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 . Then, your second line of code:

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

不会有任何效果，因为不再存在(由AJAX调用返回的内容代替).

will not have any effect because the does not exist anymore (replaced by the content return from the AJAX call).

要使其工作，您可以在JS中使用此secon代码段:

To make it work, you can use this secon piece of code in 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]));
                }
            }
        });
    }
});

这篇关于jQuery中的第一个选择框填充第二个选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！