显示基于前2个下拉列表ID的第3个下拉列表

时间:2015-04-06 14:05:24

标签: javascript php jquery

我想显示一个相互关联的下拉列表。当第一个下拉列表选中区域列表时,相关的区域列表将填入第二个下拉列表中。直到我能够做到这一点。但是在第二次下拉之后,即选择了扇区,我想要显示基于“区域”和“区域”的图形。和' Sector'。这部分我无法做到。我可以根据' Sector'显示图表。只有不是区域和部门。

这是我的代码

获取部门

function showItems(sel) {
    var cat_id = sel.options[sel.selectedIndex].value;  
    $("#output1").html( "" );
    $("#output2").html( "" );
    if (cat_id.length > 0 ) {

     $.ajax({
            type: "POST",
            url: "fetch_sectors.php",
            data: "cat_id="+cat_id,
            cache: false,
            beforeSend: function () {
                $('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {    
                $("#output1").html( html );
            }
        });
    }
}

获取图(仅基于扇区)

function showItemDet(sel) {
    var item_id = sel.options[sel.selectedIndex].value; 
    $("#output2").html( "" ); 
    if (item_id.length > 0 ) { 
     $.ajax({
            type: "POST",
            url: "fetch_plot.php",
            data: "item_id="+item_id,
            cache: false,
            beforeSend: function () { 
                $('#output2').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {    
                $("#output2").html( html );
            }
        });
    }
}

我该怎么办?

*** **** EDIT

我做了类似这样的事情

<script>
function showPlots(area, sector) {
    var item_id = sel.options[sel.selectedIndex].value; 
    var cat_id = sel.options[sel.selectedIndex].value; 
    $("#output2").html( "" ); 
    if (item_id.length > 0 ) { 
     $.ajax({
            type: "POST",
            url: "fetch_plot.php",
            data: {area: item_id, sector:cat_id},
            cache: false,
            beforeSend: function () { 
                $('#output2').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {    
                $("#output2").html( html );
            }
        });
    }
}
</script>

和fetch_plots

   $area = ($_REQUEST["area"] <> "") ? trim( addslashes($_REQUEST["area"])) : "";
echo $area;
$sector = ($_REQUEST["sector"] <> "") ? trim( addslashes($_REQUEST["sector"])) : "";
if ($item_id <> "" && $cat_id<>"") { 
$sql = "SELECT * FROM plots where area_id=".$area." AND sec_id=".$sector."";
echo $sql;

$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
$query = mysqli_query($con, $sql);
?>

<select name="plot">
    <option value="">Select Plot</option>
    <?php while ($rs = mysqli_fetch_array($query)) { ?>
    <option value="<?php echo $rs["plot_id"]; ?>"><?php echo $rs["name"]; ?></option>
    <?php } ?>
</select>

<?php 
    }
}
?>

1 个答案:

答案 0 :(得分:1)

     $.ajax({
            type: "POST",
            url: "fetch_plots.php",
            data: {area:area, sector:sector},
            cache: false,
            beforeSend: function () { 
                $('#output2').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {    
                $("#output2").html( html );
            }
        });

<强> fetch_plots.php

$area = (isset($_REQUEST["area"]) ? intval($_REQUEST["area"]) : 0);
// assuming "$area" is an integer, not a varchar
echo $area;
$sector = (isset($_REQUEST["sector"]) ? intval($_REQUEST["sector"]) : 0);
// assuming "$sector" is an integer, not a varchar
echo $sector;
if ( !empty($area) && !empty($sector) ) { 
    $sql = "SELECT * FROM plots where area_id=" . $area . " AND sec_id=" . $sector;
echo $sql;
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
    $query = mysqli_query($con, $sql);
?>
    <select name="plot">
        <option value="">Select Plot</option>
        <?php 
            while ($rs = mysqli_fetch_array($query)) {
        ?>
                <option value="<?php echo $rs["plot_id"]; ?>"><?php echo $rs["name"]; ?></option>
         <?php } ?>
     </select>
<?php 
    }
}
?>