I am trying to manipulate the values of a dropdown list using another. Below is the full code. The values are essentially just time in hrs.
<!-- start -->
<div id="start">
<p>Start time</p>
<select name="select1" id="select1" >
<option value="8:00">8:00</option>
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
</select>
</div>
<!--end time -->
<div id="end">
<p>End time</p>
<select name="select2" id="select2">
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
</select>
My goal is to make sure the dropdown list called endtime changes its values according to what I select in the dropdown list called starttime. For example: if I select a value of 10:00 hrs in starttime, the endtime list should only show hrs after 10:30 and hide the hrs before 10:00. So I basically want the starttime to always be before endtime.
There should also be a time limit of maximum 2 hrs. For example: if I select 10:00hrs in start time I can only select values up till 12:00 and under in the endtime list.
I cannot seem to figure out how to do it with plain JavaScript as I am a newbie.
I was board
<html><head><script>
var times = ["8:00","8:30","9:00","9:30","10:00","10:30","11:00",
"11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00",
"15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00",
"19:30","20:00","20:30","21:00","21:30","22:00"];
var start,end;
function onLoad(){
start = document.getElementById('start');
end = document.getElementById('end');
for(var i=0;i<times.length-1;i+=1)
start.innerHTML += '<option value="'+times[i]+'">'+times[i]+'</option>';
for(var i=1;i<times.length;i+=1)
end.innerHTML += '<option value="'+times[i]+'">'+times[i]+'</option>';
end.value = '22:00';
}
function buildStart(){
var val = start.value;
start.innerHTML = '';
for(var i=0;i<times.indexOf(end.value);i++)
start.innerHTML += '<option value="'+times[i]+'">'+times[i]+'</option>';
start.value = val;
}
function buildEnd(){
var val = end.value;
end.innerHTML = '';
for(var i=times.indexOf(start.value)+1;i<times.length;i++)
end.innerHTML += '<option value="'+times[i]+'">'+times[i]+'</option>';
end.value = val;
}
</script></head><body onload="onLoad();">
<select id="start" onchange="buildEnd();"></select>
<select id="end" onchange="buildStart();"></select>
</body></html>
To sum it up though :
1) You want to build larger selects with a script, not manually.
2) If you keep your values in an array like this code here, you can easily check if one select has a value smaller/greater than the other.
3) This question seems really lazy.
~~ Hard Mode ~~
Get rid of the ugly array at the top with this :
var times = [];
for(var i=8;i<22.5;i+=0.5)
times.push((i.toFixed(2)+'').split('.').join(':'));