创建级联下拉组
Creating a cascading dropdown group
我正在尝试创建一组下拉列表来创建 "search"。在选择上一个下拉列表之前,应隐藏每个下拉列表。先前选择的值与下一个下拉列表中的值无关。只有在之前的下拉列表仍处于默认值时,它们才应该被隐藏。有什么办法可以使这成为可能吗?我已经能够隐藏第二个下拉菜单,但是从第三个和以后的下拉菜单,我无法让它们动态显示。
这是没有任何下拉菜单的样子 css:
我想隐藏 "Year" 之后的每个下拉菜单,并且在每个下拉菜单之后,下一个会出现。
这是我当前的代码:
<form name="ftpquery" method="post" action="sendFTP.php">
<select name="year">
<option value="">Year</option>
<?php for($i = 1992; $i < 2016; $i++) { ?>
<option value = "<?php echo $i; ?>"><?php echo $i; ?></option>;
<?php } ?>
</select>
<select name = "julian">
<option value = "">Julian</option>
<?php
for($i = 1; $i < 366; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "station">
<option value = "">Station</option>
<?php
while ($row = mysqli_fetch_array($response)){
?>
<option value = "<?php echo $row['Station'] ?>"><?php echo $row['Station'] ?></option>;
<?php } ?>
</select>
<select name = "month">
<option value = "">Month</option>
<?php
for($i = 1; $i < 13; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "day">
<option value = "">Day</option>
<?php
for($i = 1; $i <= 31; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "hour">
<option value = "">Hour</option>
<?php
for($i = 0; $i <= 23; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "min">
<option value = "">Min</option>
<option value = "00"><?php echo "00" ?></option>;
<option value = "15"><?php echo "15" ?></option>;
<option value = "30"><?php echo "30" ?></option>;
<option value = "45"><?php echo "45" ?></option>;
</select>
<select name = "version">
<option value = "">Version</option>
<option value = "a"><?php echo "a" ?></option>;
<option value = "b"><?php echo "b" ?></option>;
</select>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
有什么方法可以做到这一点吗?
感谢您的宝贵时间和帮助!
我 运行 jQuery 中的一些东西是这样的:
<style>
select.date-select {
display: none;
}
</style>
<script type="text/javascript">
function selectShowHide()
{
// Loop through all the .date-select selects
$("select.date-select").each(function() {
if ($(this).val() == 0) {
// If it has no value hide it
$(this).next("select.date-select").hide();
} else {
// If it does show it
$(this).next("select.date-select").show();
}
});
}
$(function(){
// On load activate the show hide
selectShowHide();
// Show the first one
$("select.date-select").first().show();
// On change of select work out what to hide
$("select.date-select").change(function(){
selectShowHide();
});
});
</script>
您需要为所有 select 提供 class 日期-select:
<select class="date-select">
</select>
还有一个fiddle:http://jsfiddle.net/hnwLqo7h/
我正在尝试创建一组下拉列表来创建 "search"。在选择上一个下拉列表之前,应隐藏每个下拉列表。先前选择的值与下一个下拉列表中的值无关。只有在之前的下拉列表仍处于默认值时,它们才应该被隐藏。有什么办法可以使这成为可能吗?我已经能够隐藏第二个下拉菜单,但是从第三个和以后的下拉菜单,我无法让它们动态显示。
这是没有任何下拉菜单的样子 css:
我想隐藏 "Year" 之后的每个下拉菜单,并且在每个下拉菜单之后,下一个会出现。
这是我当前的代码:
<form name="ftpquery" method="post" action="sendFTP.php">
<select name="year">
<option value="">Year</option>
<?php for($i = 1992; $i < 2016; $i++) { ?>
<option value = "<?php echo $i; ?>"><?php echo $i; ?></option>;
<?php } ?>
</select>
<select name = "julian">
<option value = "">Julian</option>
<?php
for($i = 1; $i < 366; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "station">
<option value = "">Station</option>
<?php
while ($row = mysqli_fetch_array($response)){
?>
<option value = "<?php echo $row['Station'] ?>"><?php echo $row['Station'] ?></option>;
<?php } ?>
</select>
<select name = "month">
<option value = "">Month</option>
<?php
for($i = 1; $i < 13; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "day">
<option value = "">Day</option>
<?php
for($i = 1; $i <= 31; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "hour">
<option value = "">Hour</option>
<?php
for($i = 0; $i <= 23; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "min">
<option value = "">Min</option>
<option value = "00"><?php echo "00" ?></option>;
<option value = "15"><?php echo "15" ?></option>;
<option value = "30"><?php echo "30" ?></option>;
<option value = "45"><?php echo "45" ?></option>;
</select>
<select name = "version">
<option value = "">Version</option>
<option value = "a"><?php echo "a" ?></option>;
<option value = "b"><?php echo "b" ?></option>;
</select>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
有什么方法可以做到这一点吗?
感谢您的宝贵时间和帮助!
我 运行 jQuery 中的一些东西是这样的:
<style>
select.date-select {
display: none;
}
</style>
<script type="text/javascript">
function selectShowHide()
{
// Loop through all the .date-select selects
$("select.date-select").each(function() {
if ($(this).val() == 0) {
// If it has no value hide it
$(this).next("select.date-select").hide();
} else {
// If it does show it
$(this).next("select.date-select").show();
}
});
}
$(function(){
// On load activate the show hide
selectShowHide();
// Show the first one
$("select.date-select").first().show();
// On change of select work out what to hide
$("select.date-select").change(function(){
selectShowHide();
});
});
</script>
您需要为所有 select 提供 class 日期-select:
<select class="date-select">
</select>
还有一个fiddle:http://jsfiddle.net/hnwLqo7h/