我有级联下拉列表的代码，有助于执行搜索。
它工作得很好，也显示了结果，但问题是，
第一次加载页面时，显示第一个下拉列表，当从中选择一个值时，显示第二个下拉列表，从第二个下拉列表中选择一个值后执行搜索。
我希望在选择下拉列表时，两个下拉列表应该一起显示，
然而，第二个下拉列表应该包含任何值，或者可以禁用(首选)并且仅当从第一个下拉列表中选择一个值时才启用。
索引.php
<body>
<div id="container">
<div id="body">
<div class="mhead"><h2></h2></div>
<div id="dropdowns">
<div id="center" class="cascade">
<?php
$sql = "SELECT * FROM search_parent ORDER BY searchname";
$query = mysqli_query($con, $sql);
?>
<label>Country:
<select name="country" id = "drop1">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
<option value="<?php echo $rs["id"]; ?>"><?php echo $rs["searchname"]; ?></option>
<?php } ?>
</select>
</label>
</div>
<div class="cascade" id="state"></div>
<div id="city" class="cascade"></div>
</div>
</div>
</div>
<div class="showsearch"> </div>
<p> </p>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function (){
$("select#drop1").change(function (){
var parent_id = $("select#drop1 option:selected").attr('value');
// alert(parent_id);
$("#state").html("");
//$("#city").html( "" );
if (parent_id.length > 0)
{
$.ajax({
type: "POST",
url: "fetch_state.php",
data: "parent_id=" + parent_id,
cache: false,
beforeSend: function ()
{
$('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function (html)
{
$("#state").html(html);
}
});
}
});
});
</script>
</body>
获取状态.php
<?php
include("connection.php");
$parent_id = trim(mysql_escape_string($_POST["parent_id"]));
$sql = "SELECT * FROM features WHERE parent_id = '" . $parent_id . "' ORDER BY fname";
$count = mysqli_num_rows(mysqli_query($con, $sql));
if ($count > 0) {
$query = mysqli_query($con, $sql);
?>
<label>State:
<select name="state" id="drop2">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
<option value="<?php echo $rs["id"]; ?>"><?php echo $rs["fname"]; ?></option>
<?php } ?>
</select>
</label>
<?php } ?>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
$('#drop2').on('change', function () {
//var fname = $(this).val();
var fname = $(this).find('option:selected').text();
// rename your file which include $fname with get_search_data.php
if (fname !== "") {
$.post('get_search_data.php', {fname: fname}, function (data) {<!--get_search_data.php is used to perform search--->
$('.showsearch').html(data);
});
}
});
});
</script>
最佳答案
将两个下拉菜单都放在 index.php 中，但给第二个下拉菜单一个 disabled 属性。也给它一个值:
<select name="state" id="drop2" disabled="true">
<option value="">Please Select</option>
</select>
现在将以下内容放入您的 $(document).ready 中:
$('#drop1').change(function(){
$('#drop2').prop("disabled", false);
});
这将禁用第二个下拉列表，直到第一个选择一个值。
将 fetch_state.php 中的 JS 放在其余的下面。
现在，当您选择一个值时，下拉列表将被启用并被填充。
结果应该是这样的:
<body>
<div id="container">
<div id="body">
<div class="mhead"><h2></h2></div>
<div id="dropdowns">
<div id="center" class="cascade">
<?php
$sql = "SELECT * FROM search_parent ORDER BY searchname";
$query = mysqli_query($con, $sql);
?>
<label>Country:
<select name="country" id = "drop1">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
<option value="<?php echo $rs["id"]; ?>"><?php echo $rs["searchname"]; ?></option>
<?php } ?>
</select>
</label>
</div>
<div class="cascade" id="state">
<label>State:
<select name="state" id="drop2" disabled="true">
<option value="">Please Select</option>
</select>
</label>
</div>
<div id="city" class="cascade"></div>
</div>
</div>
</div>
<div class="showsearch"> </div>
<p> </p>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function (){
$("select#drop1").change(function (){
var parent_id = $("select#drop1 option:selected").attr('value');
// alert(parent_id);
$("#state").html("");
//$("#city").html( "" );
if (parent_id.length > 0)
{
$.ajax({
type: "POST",
url: "fetch_state.php",
data: "parent_id=" + parent_id,
cache: false,
beforeSend: function ()
{
$('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function (html)
{
$("#state").html(html);
}
});
}
});
$('.drop1').change(function(){
$('.drop2').prop("disabled", false);
});
$('#drop2').on('change', function () {
//var fname = $(this).val();
var fname = $(this).find('option:selected').text();
// rename your file which include $fname with get_search_data.php
if (fname !== "") {
$.post('get_search_data.php', {fname: fname}, function (data) {<!--get_search_data.php is used to perform search--->
$('.showsearch').html(data);
});
}
});
});
</script>
</body>
关于javascript - 在一个页面上同时显示级联列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27416744/