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

Question

How to do when selecting the one subject then the time will appear according to the subject selected? each subject have many options of time and how to display when select one subject and the time display the time selected subject

<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>

主题 1： * - Select 主题-- 马来语英语数学科学

时间和日期： * - Select 时间和日期-- 上午 10 点至 12 点（星期六）下午 2:00 - 4:00（星期六）上午 9 点至上午 11 点（星期五）下午 3:00 - 5:00（星期五）上午 10 点至 12 点（星期一）下午 2.00 - 4.00（星期二）上午 9 点至 11 点（星期四）下午 3:00 - 5:00（星期日）

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 select 中显示多个 selected 选项，除非像这样使用 multi-select：enter link description here

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

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

How to dynamically select option in dropdown menu?

javascript

php

jquery

accordion

jquery-ui-accordion