Question

所以我有一个基本表单，用户选择要记录的开始和结束时间，然后选择他们想要记录的位置。我想更改表单，以便如果用户选择MARK 104或MARK 125的位置，则开始时间和结束时间下拉的更改允许用户在上午8:00到晚上10:00之间的任何时间记录而不是上午8:00 - 下午5:00（只有在选择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一点都不熟悉，所以我不确定这些是如何互动的，但是我在这里看了一些other posts可以想出这个：

JSFiddle Sample

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

 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项。虽然如果你能够更动态地定义应该显示哪些选项，那将是理想的选择。 Here is a fiddle sample.

需要使用类似的方法来完整填充下拉列表，如果不是在每个选项中都使用vbscript将值存储在隐藏字段中或者要访问并选择正确的值onload，则可能会更好使用javascript或jquery。

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

2 个答案: