Change drop down list values depending on another drop down list

Question

So I have a basic form where a user selects a start and end time to record, and then they select the location where they want to record. I want to change the form so that if the user selects a location of MARK 104 or MARK 125 then the start time and end time drop down's change to allow the users to record anytime from 8:00AM - 10:00PM instead of 8:00AM - 5:00PM (which should only happen with selection of OTHER or KELL 2123).

So my question is how can I use javascript to achieve this? I want to make sure that the drop down options also have values because it will be submitted to a database. As you can see there is also some vbscript that will be needed to be added to each new drop down option as well...

I have the following JSFiddle: http://jsfiddle.net/W4m9S/26/

And the following HTML:

</select>
</dd>
<dd><label for="Record_Start_Time">Start Time:</label>
<select name="Record_Start_Time" id="Record_Start_Time" onchange="checktime()">
<option <%if session("MSR_Record_Start_Time") = "0800" then response.write "selected" end if%> value="0800">0800 - 8:00 am</option>
<option <%if session("MSR_Record_Start_Time") = "0830" then response.write "selected" end if%> value="0830">0830 - 8:30 am</option>
<option <%if session("MSR_Record_Start_Time") = "0900" then response.write "selected" end if%> value="0900">0900 - 9:00 am</option>
<option <%if session("MSR_Record_Start_Time") = "0930" then response.write "selected" end if%> value="0930">0930 - 9:30 am</option>
<option <%if session("MSR_Record_Start_Time") = "1000" then response.write "selected" end if%> value="1000">1000 - 10:00 am</option>
<option <%if session("MSR_Record_Start_Time") = "1000" then response.write "selected" end if%> value="1000">1030 - 10:30 am</option>
<option <%if session("MSR_Record_Start_Time") = "1100" then response.write "selected" end if%> value="1100">1100 - 11:00 am</option>
<option <%if session("MSR_Record_Start_Time") = "1130" then response.write "selected" end if%> value="1130">1130 - 11:30 am</option>
<option <%if session("MSR_Record_Start_Time") = "1200" then response.write "selected" end if%> value="1200">1200 - 12:00 pm</option>
<option <%if session("MSR_Record_Start_Time") = "1230" then response.write "selected" end if%> value="1230">1230 - 12:30 pm</option>
<option <%if session("MSR_Record_Start_Time") = "1300" then response.write "selected" end if%> value="1300">1300 - 1:00 pm</option>
<option <%if session("MSR_Record_Start_Time") = "1330" then response.write "selected" end if%> value="1330">1330 - 1:30 pm</option>
<option <%if session("MSR_Record_Start_Time") = "1400" then response.write "selected" end if%> value="1400">1400 - 2:00 pm</option>
<option <%if session("MSR_Record_Start_Time") = "1430" then response.write "selected" end if%> value="1430">1430 - 2:30 pm</option>
<option <%if session("MSR_Record_Start_Time") = "1500" then response.write "selected" end if%> value="1500">1500 - 3:00 pm</option>
<option <%if session("MSR_Record_Start_Time") = "1530" then response.write "selected" end if%> value="1530">1530 - 3:30 pm</option>
<option <%if session("MSR_Record_Start_Time") = "1600" then response.write "selected" end if%> value="1600">1600 - 4:00 pm</option>
<option <%if session("MSR_Record_Start_Time") = "1630" then response.write "selected" end if%> value="1630">1630 - 4:30 pm</option>
</select></dd>
<dd><label for="Record_End_Time">End Time:</label>
<select name="Record_End_Time" id="Record_End_Time" onchange="checktime()">
<option <%if session("MSR_Record_End_Time") = "0830" then response.write "selected" end if%> value="0830">0830 - 8:30 am</option>
<option <%if session("MSR_Record_End_Time") = "0900" then response.write "selected" end if%> value="0900">0900 - 9:00 am</option>
<option <%if session("MSR_Record_End_Time") = "0930" then response.write "selected" end if%> value="0930">0930 - 9:30 am</option>
<option <%if session("MSR_Record_End_Time") = "1000" then response.write "selected" end if%> value="1000">1000 - 10:00 am</option>
<option <%if session("MSR_Record_End_Time") = "1030" then response.write "selected" end if%> value="1030">1030 - 10:30 am</option>
<option <%if session("MSR_Record_End_Time") = "1100" then response.write "selected" end if%> value="1100">1100 - 11:00 am</option>
<option <%if session("MSR_Record_End_Time") = "1130" then response.write "selected" end if%> value="1130">1130 - 11:30 am</option>
<option <%if session("MSR_Record_End_Time") = "1200" then response.write "selected" end if%> value="1200">1200 - 12:00 pm</option>
<option <%if session("MSR_Record_End_Time") = "1230" then response.write "selected" end if%> value="1230">1230 - 12:30 pm</option>
<option <%if session("MSR_Record_End_Time") = "1300" then response.write "selected" end if%> value="1300">1300 - 1:00 pm</option>
<option <%if session("MSR_Record_End_Time") = "1330" then response.write "selected" end if%> value="1330">1330 - 1:30 pm</option>
<option <%if session("MSR_Record_End_Time") = "1400" then response.write "selected" end if%> value="1400">1400 - 2:00 pm</option>
<option <%if session("MSR_Record_End_Time") = "1430" then response.write "selected" end if%> value="1430">1430 - 2:30 pm</option>
<option <%if session("MSR_Record_End_Time") = "1500" then response.write "selected" end if%> value="1500">1500 - 3:00 pm</option>
<option <%if session("MSR_Record_End_Time") = "1530" then response.write "selected" end if%> value="1530">1530 - 3:30 pm</option>
<option <%if session("MSR_Record_End_Time") = "1600" then response.write "selected" end if%> value="1600">1600 - 4:00 pm</option>
<option <%if session("MSR_Record_End_Time") = "1630" then response.write "selected" end if%> value="1630">1630 - 4:30 pm</option>
<option <%if session("MSR_Record_End_Time") = "1700" then response.write "selected" end if%> value="1700">1700 - 5:00 pm</option>
</select></dd>
<dd><label for="Record_Location">Location:</label> <select name="Record_Location" id="Record_Location" onchange="displayAccordingly()">
<option>MARK 104</option>
<option>MARK 125</option>
<option>KELL 2123</option>
<option>OTHER</option>
</select></dd>

Answer 1

Okay after looking into this for a little bit I have created a sample solution for you. Unfortunately I am not familiar at all with VBScript so I'm not sure how these will interact, but I looked at some other posts on here can came up with this:

JSFiddle Sample

You can get the three selectors with this code at least

 var $startTime = $('select#Record_Start_Time');
 var $endTime = $('select#Record_End_Time');
 var $location = $('select#Record_Location');

then it will populate the values from that JSON bit.

This might not be the best solution for what you have, but there ya go.

Updated to have a different end time.

Answer 2

You can filter the dropdown items using the jQuery filter method, as shown below:

function displayAccordingly() {
    if ($("#Record_Location").val() == "MARK 125") {
        $("#Record_Start_Time option").filter(function() {
            return !($(this).val() == "0830" ||
                     $(this).val() == "0900");   
        }).remove();
    }
}

This will only show the 830 and 900 items in the start time dropdown. Although if you are able to more dynamicallly define which options should be shown or not that would be ideal. Here is a fiddle sample.

A similar method would need to be used to populate the dropdown in full, and it might be better if rather than having vbscript in each option that you store the values in a hidden field or something to access and select the correct value onload with javascript or jquery.