我想显示一个相互关联的下拉列表。当选择第一个下拉列表(即区域列表)时,相关的扇区列表将填充在第二个下拉列表中。在此之前,我可以做到这一点。但在第二个下拉列表即扇形被选中后,我想显示基于"面积"answers"扇形"的绘图。这部分我做不到。我只能显示基于"扇区"的地块,而不能同时显示区域和扇区。
这是我的代码
提取扇区
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 );
}
});
}
}
我该怎么做?。
***编辑***
我做了一些类似的事情
<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
}
}
?>
$.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
}
}
?>