javascript - 如何在下拉菜单中动态选择选项?
问题描述
选择一个科目怎么办,时间会根据所选择的科目出现?每个科目都有很多时间选项,选择一个科目时如何显示,时间显示所选科目的时间
<div class="form-group">
<label class="control-label"> Subject 1: </label> <font color="red"> * </font>
<select id="levelSbj1" name="levelSbj1" class="form-control" required="required">
<option value="0"> - Select Subject--</option>
<option value="1"> Bahasa Malaysia</option>
<option value="2"> English</option>
<option value="3"> Mathematics</option>
<option value="4"> Science</option>
</select>
</div>
<div class="form-group">
<label class="control-label"> Time and Day: </label> <font color="red"> * </font>
<select id="levelLvl1" name="levelLvl1" class="form-control" required="required">
<option value="0"> - Select Time and Day--</option>
<option value="1"> 10.00 - 12.00 am (Saturday)</option>
<option value="1"> 2.00 - 4.00 pm (Saturday)</option>
<option value="2"> 9.00am - 11.00am (Friday)</option>
<option value="2"> 3.00 - 5.00 pm (Friday)</option>
<option value="3"> 10.00 - 12.00 am (monday)</option>
<option value="3"> 2.00 - 4.00 pm (tuesday)</option>
<option value="4"> 9.00 - 11.00 am (thursday)</option>
<option value="4"> 3.00 - 5.00 pm (sunday)</option>
</select>
</div>
科目一:* - 选择科目--马来文英文数学科学
时间和日期: * - 选择时间和日期 - 上午 10:00 - 中午 12:00(星期六) 2:00 - 下午 4:00(星期六) 上午 9:00 - 上午 11:00(星期五) 3:00 - 下午 5:00(星期五) 10:00 - 上午 12:00(星期一) 2:00 -下午 4 点(星期二) 上午 9 点 - 上午 11 点(星期四) 下午 3 点 - 下午 5 点(星期日)
解决方案
在客户端,您可以像这样尝试使用 jQuery:
$(document).ready(function() {
// when selection changes on Subject
$('#levelSbj1').on('change', function(e) {
var currentSubject = $(this);
var timeSelect = $('#levelLvl1');
// select time which corresponds to the subbject's value
timeSelect.val(currentSubject.val());
var resultsDiv = $('#result');
switch (currentSubject.val()) {
case '1': // Bahasa Malaysia
resultsDiv.html('<span>Subject: ' + currentSubject.find("option:selected").text() + ', Time: ' + timeSelect.find('option').eq(1).text() + ' - ' + timeSelect.find('option').eq(2).text() + '</span>');
break;
case '2': // English
resultsDiv.html('<span>Subject: ' + currentSubject.find("option:selected").text() + ', Time: ' + timeSelect.find('option').eq(1).text() + ' - ' + timeSelect.find('option').eq(3).text() + '</span>');
break;
case '3': // Mathematics
resultsDiv.html('<span>Subject: ' + currentSubject.find("option:selected").text() + ', Time: ' + timeSelect.find('option').eq(3).text() + ' - ' + timeSelect.find('option').eq(4).text() + '</span>');
break;
case '4': // Science
resultsDiv.html('<span>Subject: ' + currentSubject.find("option:selected").text() + ', Time: ' + timeSelect.find('option').eq(2).text() + ' - ' + timeSelect.find('option').eq(3).text() + '</span>');
break;
}
})
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="form-group">
<label class="control-label">Subject 1:</label>
<font color="red">*</font>
<select id="levelSbj1" name="levelSbj1" class="form-control" required="required">
<option value="0">--Select Subject--</option>
<option value="1">Bahasa Malaysia</option>
<option value="2">English</option>
<option value="3">Mathematics</option>
<option value="4">Science</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Time and Day:</label>
<font color="red">*</font>
<select id="levelLvl1" name="levelLvl1" class="form-control" required="required">
<option value="0">--Select Time and Day--</option>
<option value="1">10.00 - 12.00 am (Saturday)</option>
<option value="2">2.00 - 4. 00 pm (Saturday)</option>
<option value="3">9.00 - 11.00 am (Friday)</option>
<option value="4">3.00 - 5. 00 pm (Friday)</option>
<option value="5">10.00 - 12.00 am (monday)</option>
<option value="6">2.00 - 4. 00 pm (tuesday)</option>
<option value="7">9.00 - 11.00 am (thursday)</option>
<option value="8">3.00 - 5. 00 pm (sunday)</option>
</select>
</div>
<div id="result"></div>
更新
您不能在 HTML 选择中显示多个选定的选项,除非像这样使用多选:在此处输入链接描述
但是,您可以提取多个选项的值并将它们显示在某处。我已经更新了代码片段。看看它是如何完成的。这只是一个虚拟示例,您需要根据自己的要求进行调整。
推荐阅读
- python - 如何在 seaborn/matplotlib (barplot) 中使用图像作为 xtick 标签
- r - 在R中将数字对象转换为字符对象时如何保留尾随零?
- java - “JSON 解析错误:无法构造实例(尽管至少存在一个 Creator):无法从对象值反序列化 - SpringBoot
- python - 在 Python 中结合多进程和多线程
- python - 如何将 OpenCV 输出视频流式传输到 Plotly Dash App?
- python-3.x - python 客户端和服务器套接字编程在一个脚本中
- java - java.sql.SQLSyntaxErrorException:未知列
- synchronization - 使用 BufferMemory 屏障在绘制和计算命令之间同步
- python - 删除数据框中的文本
- mysql - 在 MySQL 中恢复复制