一个下拉列表取决于另一个

时间:2011-09-22 09:10:13

标签: php javascript ajax character-encoding drop-down-menu

我开发了一个包含两个下拉列表(选择标签)的php网页,其中一个用于显示丰田,日产,雪佛兰等汽车类型。

Toyota
Nissan
Chevrolet

另一个用于显示汽车模型,如丰田凯美瑞,丰田Corrolla,丰田Cressida,丰田Eco和儿子依赖于从第一个下拉列表中选择的汽车类型。

我使用PHP作为开发语言加上Sybase作为数据库,并使用ODBC连接到它。 我使用Windows-1256作为字符编码,因为我显示的数据是阿拉伯语。

我尝试使用Ajax来实现它,但我不知道我以前如何使用Ajax只返回一个值但在这种情况下我需要以下列格式回复一些数据库记录: -

15 "Toyota Camry"
16 "Toyota Corrolla"
17 "Toyota Cressida"
18 "Toyota Eco"

加上数据是用阿拉伯文发送的,不是上面列出的英文,所以列表可能如下: -

15 "تويوتا كامري"
16 "تويوتا كرولا"
17 "تويوتا كرسيدا"
18 "تويوتا إيكو"

我如何使用Ajax做到这一点,并确保阿拉伯语文本能够很好地显示?

我等你的回答和帮助,并提前致谢.....

我的代码编写如下,以使事情更清晰,对其他人有用并得到正确的答案:

第一个文件

showCarData.php File (Saved as ANSI PHP File)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript" /></script>
<script type="text/javascript"> 
$(document).ready(function()
{ 
$('#selectCarType').change(function ()
{ 
$('#selectCarModel option').remove();
$.ajax(
{
url: "getCarModels.php", 
dataType: 'json', 
data: { CarType: $('#selectCarType').val() }, 
async: true,
success: function(result)
{   
//var x = eval(result);
$.each(result, function(key, value) { $('#selectCarModel').append('<option value="' + key + '">' + value + '</option>'); } );
}
});
$('#selectCarModel').show(); 
});
});
</script> 
</head>
<body>
<select id="selectCarType">     
<option value="0" selected="selected">select car type</option>
<?php
//Connecting To The Database and getting $conn Variable       
$conn = odbc_connect("database","username","password");
//Connection Check
if (!$conn)
{
echo "Database Connection Error: " . $conn;
}
$sqlCarTypes = "SELECT DISTINCT CarTypeID AS CarTypeCode, CarTypeDesc AS CarTypeName FROM tableCarTypes ORDER BY CarTypeDesc ASC";
$rsCarTypes = odbc_exec($conn,$sqlCarTypes);
if (!$rsCarTypes)
{
echo "<option class='CarType' value='n' >Not Available</option>";
}                                   
else
{                                   
while ( odbc_fetch_row($rsCarTypes) )
{
//Assigning The Database Result Set Rows To User-Defined Varaiables
$CarTypeCode = odbc_result($rsCarTypes,"CarTypeCode");
$CarTypeName = odbc_result($rsCarTypes,"CarTypeName");
//Creating the options
echo '<option class="CarType" style="color:#060;" value="'. $CarTypeCode . '"';
echo '>' . $CarTypeName . '</option>' . "\n";               
}                                   
}
odbc_close($conn);
?>
</select>
<select id="selectCarModel">        
<option value="0" selected="selected">select car model</option>
</select>
</body>
</html>

,另一个文件是

getCarModels.php File (Saved as ANSI PHP File)

<?PHP
//determine the Characterset
header('Content-Type: text/html; charset=windows-1256');

//Recieve CarType variable
$CarType =  $_GET['CarType'];
// initialize an array that will hold the rows 
$result = array();

if ($CarType != Null)
{
//Connecting To The Database and getting $conn Variable       
$conn = odbc_connect("database","username","password");
//Connection Check
if (!$conn)
{
echo "Database Connection Error: " . $conn;
}
$sqlCarModels = "SELECT DISTINCT CarModelID AS CarModelCode, CarModelDesc AS CarModelName FROM tableCarTypes WHERE CarTypeID='$CarType' ORDER BY CarModelDesc ASC ";
$rsCarModels  = odbc_exec($conn,$sqlCarModels);
if ( $rsCarModels )
{
while ( odbc_fetch_row($rsCarModels) )
{
$CarModelCode = odbc_result($rsCarModels,"CarModelCode");
$CarModelName = odbc_result($rsCarModels,"CarModelName");
$CarModelName = utf8_encode($CarModelName);
$result [$CarModelCode] = $CarModelName;
}
}
else
{
echo "No Data";
}
odbc_close($conn);
}
//send the result in json encoding
echo json_encode($result);
?>

我希望这清楚我所询问的内容,并且任何人都可以帮助我找出错误或错过的地方以正确的格式输出输出而不是因为它而无法读取的奇怪符号和字符显示在第二个下拉列表中。

提前致谢

1 个答案:

答案 0 :(得分:1)

我在这种情况下做的是:

  1. 例如,我在服务器上构建了第一个下拉列表,其中PHP while覆盖了数据库中的汽车类别。我将该类别的id作为value的{​​{1}}。生成的HTML应如下所示:

    &lt; select id =“cars-categories”&gt;   &lt; option value =“1”&gt; Toyota&lt; / option&gt;   &lt; option value =“2”&gt; Nissan&lt; / option&gt;   &lt; option value =“3”&gt; Chevrolet&lt; / option&gt;   ... &LT; /选择&GT;

  2. 然后在页面上,使用JavaScript,我会监听select option事件,并在发生时将类别onchange发送到服务器

  3. 服务器上的PHP代码选择类别id并生成id。使用SELECT your_cols FROM product_table WHERE cat_id = $_GET['id']

  4. 将结果作为JSON发送
  5. 最后,使用JavaScritp解析返回的数据并填写模型下拉列表。

  6. 以下是客户端脚本的基本外观:

    json_encode

    编码应该不是问题。

    编辑:根据问题作者的要求,这是一种从数据库查询中获取所有行并将其作为JSON编码字符串发送回页面的简单方法。

    <script type="text/javascript">
    $(document).ready(function() {
        $('#cars-categories').change(function () {
            $('#car-models option').remove();
            $.ajax({
                url: "get_data.php",
                dataType: 'json',
                data: { category: $('#cars-categories').val() },
                async: true,
                success: function(json){
                    $.each(json, function(key, value){
                        $('#car-models').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                }
            });
            $('#car-models').show();
        });
    });
    </script>