[英]Dropdown validation onchange of start period in javascript
我只是想知道如何根據用戶在開始期間選擇的內容來更新長度值。
例如,如果用戶選擇09:00-09:50,則開始時間段具有選項1-7。
如果用戶選擇10:00-10:50,則開始時間具有選項1-6。
...
如果用戶選擇17:00-17:50,則開始期間具有選項1。
我將如何使用javascript實現此目標?
到目前為止,這是我的代碼:
<p>
<label>Start Period</label>
<select onchange="reloadRoomPreference();" id = "edit_req_start" name="">
<option>09:00 - 09:50</option>
<option>10:00 - 10:50</option>
<option>11:00 - 11:50</option>
<option>12:00 - 12:50</option>
<option>13:00 - 13:50</option>
<option>14:00 - 14:50</option>
<option>15:00 - 15:50</option>
<option>16:00 - 16:50</option>
<option>17:00 - 17:50</option>
</select>
</p>
<p>
<label>Length</label>
<select onchange="reloadRoomPreference();" id = "edit_req_length" name="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</p>
像這樣做:
<p>
<label>Start Period</label>
<select onchange="reloadRoomPreference();" id = "edit_req_start" name="">
<option value="0">09:00 - 09:50</option>
<option value="1">10:00 - 10:50</option>
<option value="2">11:00 - 11:50</option>
<option value="3">12:00 - 12:50</option>
<option value="4">10:00 - 13:50</option>
<option value="5">14:00 - 14:50</option>
<option value="6">15:00 - 15:50</option>
<option value="7">16:00 - 16:50</option>
<option value="8">17:00 - 17:50</option>
</select>
</p>
<p>
<label>Length</label>
<select onchange="reloadRoomPreference();" id = "edit_req_length" name="">
</select>
</p>
Javascript:
var optionsValue = [1, 2, 3, 4, 5, 6, 7] //Contains the values displayed in the second dropdown
//Populate with all the values
for (var i = 0; i < optionsValue.length ; i++)
$('#edit_req_length').append('<option>' + optionsValue[i] + '</option>');
//Triggered each time you change the first dropdown
$('#edit_req_start').on('change', function(data) {
var options = $(this).children('option');
$('#edit_req_length').empty();
for (var i = 0; i < optionsValue.length - $(this).val() ; i++)
//This way, we don't have any empty value
if (i >= optionsValue.length)
$('#edit_req_length').append('<option>' + optionsValue[optionsValue.length - 1] + '</option>');
else
$('#edit_req_length').append('<option>' + optionsValue[i] + '</option>');
});
JSFiddle在這里: http : //jsfiddle.net/hda7f/
但是您在第一個下拉列表中的值比第二個下拉列表中的值更多,因此我添加了一個條件,在第二個下拉列表中至少保留一項。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.