首頁猿問如何在下拉菜單中動態選擇選項？

如何在下拉菜單中動態選擇選項？

JavaScript

開心每一天1111 2021-11-18 20:52:51

選了一個科目然后根據選的科目出現時間怎么辦？每個科目有多個時間選項以及選擇科目時如何顯示和時間顯示所選科目的時間<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 點（星期日）

查看完整描述

1 回答

HUX布斯

TA貢獻1876條經驗獲得超6個贊

在客戶端，您可以像這樣嘗試使用 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;

}

})

<label class="control-label">Subject 1:</label>

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

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

更新

您不能在 HTML 選擇中顯示多個選定選項，除非使用這樣的多選：在此處輸入鏈接描述

但是，您可以提取多個選項的值并將它們顯示在某處。我已經更新了代碼片段。檢查它，看看它是如何完成的。這只是一個虛擬示例，您需要根據自己的要求進行調整。

反對回復 2021-11-18

1 回答
0 關注
164 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在下拉菜單中動態選擇選項？

如何在下拉菜單中動態選擇選項？

1 回答

添加回答