根据另一个下拉列表更改下拉列表值

Question

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

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

我有以下JSFiddle： http : //jsfiddle.net/W4m9S/26/

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

好吧，在研究了一下之后，我为您创建了一个示例解决方案。 不幸的是，我对VBScript一点都不熟悉，因此我不确定它们之间的交互方式，但是我看了一下此处的其他文章 ，可以得出以下结论：

JSFiddle示例

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

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

然后它将从该JSON位填充值。

这可能不是您所拥有的最佳解决方案，但是可以。

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

Answer 2

您可以使用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的。