Javascript 根据其他下拉列表更改下拉列表值

所以我有一个基本的表单，用户选择开始和结束时间来记录，然后他们选择要记录的位置。我想更改表单，以便如果用户选择标记104或标记125的位置，则开始时间和结束时间下拉列表的更改允许用户在8:00AM-10:00PM的任何时间进行记录，而不是在8:00AM-5:00PM（仅在选择OTHER或KELL 2123时发生）

所以我的问题是如何使用javascript实现这一点？我想确保下拉选项也有值，因为它将被提交到数据库。正如您所见，还需要将一些vbscript添加到每个新的下拉选项中

我有以下JSFIDLE：

以及以下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>

开始时间：
上午八时至八时
上午8时30分至8时30分
上午九时至九时
上午9时30分至9时30分
上午10时至10时
上午10时30分至10时30分
上午11时至11时
上午11时30分至11时30分
下午12时至12时
下午十二时三十分至十二时三十分
下午一时至一时
下午1时30分至1时30分
下午二时至二时
下午1430-2:30
下午三时至三时
下午三时三十分至三时三十分
下午16时至4时
下午16时30分至4时30分
结束时间：
上午8时30分至8时30分
上午九时至九时
上午9时30分至9时30分
上午10时至10时
上午10时30分至10时30分
上午11时至11时
上午11时30分至11时30分
下午12时至12时
下午十二时三十分至十二时三十分
下午一时至一时
下午1时30分至1时30分
下午二时至二时
下午1430-2:30
下午三时至三时
下午三时三十分至三时三十分
下午16时至4时
下午16时30分至4时30分
下午五时至五时
地点：
马克104
马克125
凯尔2123
其他

好的，在研究这一点之后，我为您创建了一个示例解决方案。不幸的是，我对VBScript一点也不熟悉，因此我不确定这些脚本将如何交互，但我在这里查看了一些，可以得出以下结论：

您至少可以使用此代码获取三个选择器

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

然后它将填充来自该JSON位的值

这可能不是你所拥有的最好的解决方案，但你可以这样做

---

更新为具有不同的结束时间。

您可以使用jQuery

filter

方法筛选下拉项，如下所示：

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

这将仅显示“开始时间”下拉列表中的830和900项。虽然如果您能够更动态地定义哪些选项应该显示或不显示，这将是理想的

---

需要使用类似的方法来完整填充下拉列表，最好不要在每个选项中使用vbscript，而是将值存储在隐藏字段或其他内容中，以便使用javascript或jquery访问并选择正确的值。是的，如果你至少能让我在JSFIDLE上走上正确的道路，那将是一个很大的帮助。这基本上就是我在寻找的，就vbscript部分而言，我想我必须自己通过反复试验来弄清楚。好吧，是的，可能需要一点修改，我只是不熟悉它。我更新了我的解决方案，使每个结束时间都比开始时间晚30分钟，以便更接近原始时间