how to hide and show dropdown list value according to another dropdown list

Question

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.

score 0 · Answer 1 · edited May 23 '17 at 12:08

I wont get to much in to this as it is more of a how to code rather than I have tried everything problem.

I would leave your start time as is but the dynamically add the end time based on the start time selection.

Check start time
On change event run function
Within the function get the start time value and create a loop up to 12
Within this function dynamically add options to an already created selection drop down

Have a look here

Ajit · Answer 2 · 2016-07-02T01:20:15.917

Here is the function that generates the array of time slots for your end time dropdown based on your requirements.

Now, all you need to do is attach the generated array from myFunc to endTime dropdown.

<script> 
function myFunc(value){
                    // parse the value "10:30" to individual hour & minutes
                    var startHour = parseInt(value.split(':')[0]);
                    var startMinute =  parseInt(value.split(':')[1]);

                    var endTimeList = [];
                    var newArrayCount = 0;

                    for(var i = startHour; i <= startHour + 2; i++){

                        endTimeList[newArrayCount] = i + ":00";
                        newArrayCount++;
                        endTimeList[newArrayCount] = i + ":30";
                        newArrayCount++;
                    }

                    endTimeList.shift(); // remove first value

                    // remove first or last value from array based on minute timing 
                    if(startMinute != 0){
                        endTimeList.shift();
                    }else{
                        endTimeList.pop();
                    }

                    console.log(endTimeList.toString());
                }
</script>

<div id="start">
    <p>Start time</p>
    <select name="select1" id="select1" onChange="myFunc(this.value)">
        <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>

Note: You will have to handle two more cases:

1). When user selects start time as "22:00" or "21:00", etc.

2). What if user wants to select start time as "8:00"(onChange doesn't get triggered)

hi thanks for you help. sorry if i sound dumb as i an absolute newbie trying to learn JS.. im confused when you say attach the generated array from myfunc to endtime list. is that by using an event? like you did in the startime list (onchange) — Madan Gurung, Jul 02 '16 at 01:41
See this similar question, http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array — Ajit, Jul 02 '16 at 12:20

ElDoRado1239 · Accepted Answer · 2016-07-02T01:34:56.053

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(':'));

hi, thankyou for your help, you code seems to work very well. — Madan Gurung, Jul 02 '16 at 04:00

how to hide and show dropdown list value according to another dropdown list

3 Answers3