Question

所以我有两个下拉列表Category和Sub-category。一旦Sub-category被选中，Category必须由SQL查询填充。

我知道如何从SQL查询中填充：

<?php
mysql_connect('localhost', 'user', 'pw');
mysql_select_db('db');

$sql = "SELECT col FROM table";
$result = mysql_query($sql);

echo "<select name='col'>";
while ($row = mysql_fetch_array($result)) {
    echo "<option value='" . $row['col'] . "'>" . $row['col'] . "</option>";
}
echo "</select>";
?>

但我不知道如何在jQuery中运行查询和更新列表：

function updateList(){
//QUERY&fill based on selection//
.val($('select[name="category"] option:selected').val());
}

我在Google上花了一个小时左右的时间，无法解决这个问题。

Answer 1

你必须在选择主类别时创建onchange函数并将其传递给jquery或javascript ajax请求响应以从具有子类别输出的另一个文件中获取值，其中sql为条件作为主要类别值。

echo "<select name='col' onchange='loadXMLDoc()'>";

以上的主猫下拉及其ajax javascript请求响应如下所示

<script>
function loadXMLDoc()
var maincat=document.getElementByName("col").val();
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("maincat_var=maincat");
}

在主页面中创建一个id为myDiv的div。而另一页应该有

<?php
mysql_connect('localhost', 'user', 'pw');
mysql_select_db('db');

$sql = "SELECT col FROM table where main_cat=$_POST['maincat_var']";
$result = mysql_query($sql);

echo "<select name='col2'>";
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row['col'] . "'>" . $row['col'] . "</option>";
}
echo "</select>";
?>

Answer 2

您可以尝试使用jquery和ajax加载子类别的值。

尝试修改并使用以下代码。此代码可能会指导您..

    $(document).ready(function(){
        $('#submit').click(function() {
            $.ajax(
            {
                url:"subcat.php?id='something'", // Here you can write php variableto pass to next page
                success:function(result){
                    $("#div1").html(result);
                }
            });
            return false;
        });
    });

点击主要类别，某些页面将被执行，其输出将显示在html元素中。

在下拉选择上运行SQL查询和更新表单

2 个答案: