下拉(选择菜单)问题

时间:2011-08-29 06:18:23

标签: php jquery mysql html drop-down-menu

我的MySQL表看起来像那样

区域表

id     |   region
-------------------
1      |   Region1
2      |   Region2

...

和学校表

region_id |   school
-------------------
1         |   schno1
1         |   schno5
1         |   schno6
2         |   scho120 

我的页面的工作方式如下:首先,页面填充名为“regions”的db表中的#regions select菜单。当用户选择#region时,js将所选区域的值发送给search.php。 Serverside php脚本在#region(以前选择的菜单)值中搜索名为“schools”的数据库表,查找所有匹配项并回显它们。

现在问题是,如何隐藏#class和#school选择菜单,并且只显示错误消息“此区域没有找到学校”如果找不到匹配项?如何检查如果没有来自search.php的结果?我是js的新手。如果可能,请编辑我的代码。 Thx提前。抱歉我的英文不好

我的javascript看起来就像http://pastie.org/2444922和来自http://pastie.org/2444929表单的代码,最后是search.php http://pastie.org/2444933

更新 我改变了我的js但没有成功!

$(document).ready(function(){
    $("#school").hide();
    $("#class").hide();
searchSchool = function(regionSelect){
var selectedRegion = $("select[name*='"+regionSelect.name+"'] option:selected").val();
if (selectedRegion!='0'){
    $.ajax({
    type: "POST",
    url : "core/code/includes/search.php",
    data: "&region_id="+selectedRegion,
    success: function(result, status, xResponse){
        if (result!=null){
            $("#school").show();
            $("#class").show();
            $("#school").html(result);
        }else{
            $("#error").html("There is no school found in this region");
            $("#school").html('');
            $("#school").hide();
        }
    },
    error: function(e){
        alert(e);
    }
    });
}else{
    $("#error").html('Please select a region first');
    $("#school").html('');        
    $("#school").hide();
    $("#class").hide();
}
}
});

3 个答案:

答案 0 :(得分:1)

你可以试试这个

index.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Ajax With Jquery</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    searchSchool = function(regionSelect){
    var selectedRegion = $("select[name*='"+regionSelect.name+"'] option:selected").val();
    if (selectedRegion!='0'){
        $.ajax({
            type: "POST",
            url : "search.php",
            data: "&region_id="+selectedRegion,
            success: function(result, status, xResponse){
            alert(result);
            if (result!=''){
                    $("#school").show();
                    $("#school").html(result);
                }else{
                    $("#error").html("There is no school found in this region");
                    $("#school").html('');
                    $("#school").hide();
                }
            },
            error: function(e){
                alert(e);
            }
        });
    }else{
        $("#error").html('Please select a region first');
        $("#school").html('');        
        $("#school").hide();
    }
}
</script>
</head>


<body>

    <?php 
$username="root";
$password="";
$database="test";

mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM regions";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();

echo "<b><center>Database Output</center></b><br><br>";

?>
<select name="region" id="region" onchange="searchSchool(this)">
<option value="0">Please select a Region</option>
<?php 
while($data = mysql_fetch_array( $result )) 
{ 
?>
<option value="<?php echo $data['id']?>"><?php echo $data['name']?></option>
<?php 
}
?>
</select>

<select name="school" id="school"></select>

<span id="error"></span>

</body>
</html>

的search.php:

<?php 

$username="root";
$password="";
$database="test";

mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

if(isset($_POST['region_id'])) {
$query = "SELECT * FROM schools WHERE region_id='".$_POST['region_id']."'";
$result=mysql_query($query);

$num = mysql_numrows($result);

if ($num>0){
    while ($row = mysql_fetch_array($result)) {
        echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';
    }
    }
else{
return null;
}
}


mysql_close();
?>

答案 1 :(得分:1)

好吧,我无法完全阅读您的完整代码,但我可以嘲笑您可能想要做的事情。

将依赖的下拉包装在div中。

<div id="dep1"></div>
<div id="dep2"></div>

现在在服务器端进行验证后,如果你找到元素创建一个下拉列表并在此处发送它或只是发送一条错误消息。

<? 
if($num>0) {
?>
<select>
<?
foreach($element as $ele) {
<option><?=$ele?></option>
}
?>
</select>
<?
} else {
?>
<div class="error">No regions found</div>
<? } ?>

你的js看起来像

$("#dep1").html(loadbar).load("mypage.php","region="+regionid);

答案 2 :(得分:1)

我认为这个问题存在于第27-30行的jQuery代码中。没有ID = cl_dropdown的元素,逗号分隔使它在sch_dropdown中查找cl_dropdown。

我的猜测是第二个选择曾经在一个点上拥有id cl_dropdown。如果是这样,它的HTML应如下所示:

<select id="cl_dropdown" name="class">

您还应该有一个消息元素。根据jQuery,你应该有一个#no_sch元素,但我没有看到它。

<div id="no_sch"></div>

然后用以下内容替换第27-30行:

if (!results)     {
    $("#sch_dropdown").hide();
    $("#cl_dropdown").hide();
    $('#no_sch').show(); 
    $('#no_sch').text('no matches found');
};