如何在下拉菜单中动态选择选项？

Question

选了一个科目然后根据选的科目出现时间怎么办？每个科目有多个时间选项以及选择科目时如何显示和时间显示所选科目的时间<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 am（星期六）2.00 - 4.00 pm（星期六）9.00am - 11.00am（星期五）3.00 - 5.00 pm（星期五）10.00 - (12.00 am)下午 4 点（星期二）上午 9 点至 11 点（星期四）下午 3 点至 5 点（星期日）     

Answer 1

在客户端，您可以像这样尝试使用 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 选择中显示多个选定选项，除非使用这样的多选：在此处输入链接描述

但是，您可以提取多个选项的值并将它们显示在某处。我已经更新了代码片段。检查它，看看它是如何完成的。这只是一个虚拟示例，您需要根据自己的要求进行调整。