我是编程和 JavaScript 新手，所以我需要你们的帮助。
我有 2 个下拉列表，我试图通过 JavaScript 的帮助使用另一个下拉列表来操作一个下拉列表。两个下拉列表都包含时间(以小时为单位)、开始时间和结束时间。
下拉列表如下所示
<!-- start time -->
<div id="start">
<p>Start time</p>
<select name="select1" id="select1" >
<option value="8:00">8:00</option>
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
</select>
</div>
<!--end time -->
<div id="end">
<p>End time</p>
<select name="select2" id="select2">
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
<option value="10:00">10:00</option>
</select>
</div>
我想要完成的是确保结束时间不会在开始时间之前开始，并且开始时间到结束时间的限制为 2 小时。无论如何，有没有使用 JavaScript 来做到这一点？无论我如何搜索，我似乎都无法在互联网上找到解决方案。
编辑，这就是我的实际文档的样子。
<head>
<!-- title -->
<title> Mycomputer </title>
<!-- css link -->
<link rel="stylesheet" type="text/css" href="second_page.css">
<!-- date picker -->
<meta charset="utf-8"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy',
minDate: 0, maxDate: 30, showButtonPanel: true});
});
</script>
</head>
<body>
<div id="greybackground">
<!-- banner image -->
<img src="images/banners.jpg" id="banner"/>
<!-- buttons -->
<form action="logout.php">
<input type="submit" value="logout" class="logout-button"/>
</form>
<form action="user.php">
<input type="submit" value="back" class="back-button"/>
</form>
<!-- headings -->
<div id="welcome">This is room <?php echo $g; ?></div>
<div id="box1"></div>
<div id="intro">1. Choose the computer you would like to book.</div>
<div id="chooseone">Please choose only one from the following computers:</div>
<div class="checkbox2">
<!-- form -->
<form action="final_page.php" method="POST">
<?php
// to connect to database
require("user_connection.php");
//if statement
if ($g == C450){
// checkbox populated with values from database
$r = mysqli_query($connect, "SELECT * FROM `C450`");
while ($line = mysqli_fetch_assoc($r)) {
echo '<input type="radio" name="bike"
value="'.$line['computer_no'].'" checked><label>'.$line['computer_no'].'</label></br>';
}
}
?>
</div>
<div class="checkbox2">
<?php
// to connect to database
require("user_connection.php");
//if statement
if ($g == E300){
// checkbox populated with values from database
$s = mysqli_query($connect, "SELECT * FROM `E300`");
while ($line = mysqli_fetch_assoc($s)) {
echo '<input type="radio" name="bike"
value="'.$line['computer_no'].'" checked><label>'.$line['computer_no'].'</label></br>';
}
}
?>
</div>
<div class="checkbox2">
<?php
// to connect to database
require("user_connection.php");
//if statement
if ($g == AL10){
// checkbox populated with values from database
$s = mysqli_query($connect, "SELECT * FROM `AL10`");
while ($line = mysqli_fetch_assoc($s)) {
echo '<input type="radio" name="bike"
value="'.$line['computer_no'].'" checked><label>'.$line['computer_no'].'</label></br>';
}
}
?>
</div>
<!-- Date -->
<div id="box2"></div>
<div id="date">2. Choose a single date you would like to book the room on.</div>
<div id="groupdate">
<div id="nametag">Date:</div>
<div id="dateS"><input type="text" id="datepicker" name="datepicker"></div>
</div>
<!-- Time -->
<div id="box3"></div>
<div id="time">3. Select the preferred start time.</div>
<div id="grouptime">
<!-- start time -->
<script>
$('#select1').on('change', function() {
if($(this).val() > $('#select2').val())
$('#select2').val($(this).val());
$('#select2 option').each(function() {
if($(this).attr('value') < $('#select1').val())
{
$(this).hide();
}
else
$(this).show();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="start">
<p>Start time</p>
<select name="select1" id="select1" >
<option value="8:00">8:00</option>
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
</select>
</div>
<!--end time -->
<div id="end">
<p>End time</p>
<select name="select2" id="select2">
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
</select>
</div>
</div>
<div id="box4"></div>
<div id="review"><p>Please review your booking before saving to make sure there are no </br>accidental error.</p></div>
<input type="submit" id="save" name="next" Value="save" class="save"/>
</form>
<footer>
<p>Copyright © 2016 MyComputer | Contact information: <a href="mailto:gurungmadan@hotmail.com">gurungmadan@hotmail.com</a></p>
</footer>
</div>
</body>
最佳答案
使用 select1 和 select2 上的 onchange 事件在用户更改它们的值时触发。 http://www.w3schools.com/jsref/event_onchange.asp
然后编写一个函数来检查每个选择的值
var select1 = document.getElementById("select1").value;
var select2 = document.getElementById("select2").value;
您可以使用正则表达式来分隔小时和分钟以便比较它们:http://www.w3schools.com/jsref/jsref_obj_regexp.asp
您可能想要使用日期对象来比较它们:http://www.w3schools.com/jsref/jsref_obj_date.asp但这只是一个选项，在您的情况下，我只会比较小时，然后如果需要，则比较分钟。
有很多方法可以做你想做的事:)
使用严格 Javascript 的一个示例:
function check(elt) {
var select1 = document.getElementById("select1").value;
var select2 = document.getElementById("select2").value;
var regex = /([8-9]|10):([03]0)/;
var match1 = regex.exec(select1);
var match2 = regex.exec(select2);
var hours1 = match1[1];
var hours2 = match2[1];
if(hours1 >= hours2) {
var minutes1 = match1[2];
var minutes2 = match2[2];
if(minutes1 >= minutes2) {
// do the changes you want here
alert("Start time should be before End time!");
}
}
}
关于javascript - 使用另一个下拉列表操作下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38117231/