Как динамически выбрать опцию в выпадающем меню? - PullRequest
Новая
       38

Как динамически выбрать опцию в выпадающем меню?

0 голосов
/ 13 октября 2019

Как поступить при выборе одного объекта, тогда время появится в соответствии с выбранным объектом? у каждого предмета есть много вариантов времени и как отображать при выборе одного предмета, а время отображать время выбранного предмета 

<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: * - Выбрать предмет - Bahasa Malaysia English Математика естествознания

Время и день: * - Выберите время и день - с 10:00 до 12:00 (суббота) с 14:00 до 16:00 (суббота) с 9:00 до 11:00 (пятница) с 15:00 до 17:00 (пятница) с 10:00 до 12:00 (понедельник)14:00 - 16:00 (вторник) 9:00 - 11:00 (четверг) 15:00 - 17:00 (воскресенье)

1 Ответ

0 голосов
/ 13 октября 2019

На стороне клиента вы можете попробовать с 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-выделении, если не используете множественный выбор какthis: введите здесь описание ссылки

Однако вы можете извлечь значения нескольких параметров и отобразить их где-нибудь. Я обновил фрагмент кода. Проверьте это, чтобы увидеть, как это делается. Это всего лишь фиктивный пример, вам нужно будет настроить его в соответствии с вашими требованиями.

...