How to dynamically select option in dropdown menu?

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>

Subject 1: * - Select Subject-- Bahasa Malaysia English Mathematics Science

Time and Day: * - Select Time and Day-- 10.00 - 12.00 am (Saturday) 2.00 - 4.00 pm (Saturday) 9.00am - 11.00am (Friday) 3.00 - 5.00 pm (Friday) 10.00 - 12.00 am (monday) 2.00 - 4.00 pm (tuesday) 9.00 - 11.00 am (thursday) 3.00 - 5.00 pm (sunday)

Answer 1

On client-side you can try with jQuery like this:

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

Update

You cannot display more than one selected option in an HTML select, unless using multi-select like this: enter link description here

You can, however, extract the values of multiple options and display them somewhere. I've updated the code snippet. Check it out to see how it's done. This is just a dummy example, you will need to adjust it according to your requirements.