Search code examples
javascriptphpjqueryaccordionjquery-ui-accordion

How to dynamically select option in dropdown menu?

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

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