如何将选定的框值集与另一组选定的框值进行比较？
我的表格带有如下所示的选定框。
我需要将前两个选择框“选择会话”和“选择时间”分组，我需要为每对下拉列表选择唯一的会话和时间。如果我在一个下拉列表中选择了一个会话和时间，并再次在下面的dropodwns中选择了相同的会话和时间，那么我必须弹出错误消息，如“相同的会话和已经选择的时间”。
我该怎么做？.. HTML代码是
<div class="line_div">
<p>You can enroll in one or more sessions:</p>
<div class="sgl_part_div">
<span class="cmt">Select Session</span><span>:</span>
<select id="first" name="first" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">Session #1: Tues May 31st - Fri June 10th (1-5:30PM)</option>
<option value="">Session #2: Tues June 14th - Fri June 24th (9-2:00PM)</option>
<option value="">Session #3: Tues June 28th - Fri July 8th (9-2:00PM)</option>
<option value="">Session #4: Tues July 12th - Fri July 22nd (9-2:00PM)</option>
<option value="">Session #5: Tues July 26th - Fri Aug 5th (9-2:00PM)</option>
<option value="">Session #6: Tues Aug 9th - Fri Aug 19th (9-2:00PM)</option>
</select>
</div>
<div class="sgl_part_div">
<span class="cmt">Select Time</span><span>:</span>
<select id="first" name="first" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">#1 only: 1pm</option>
<option value="">#1 only: 1:30pm</option>
<option value="">#1 only: 2pm</option>
<option value="">#1 only: 2:30pm</option>
<option value="">#1 only: 3:30pm</option>
<option value="">#1 only: 4pm</option>
<option value="">#1 only: 4:30 pm</option>
<option value="">#1 only: 5:00pm</option>
<option value="">9am</option>
<option value="">9:30am</option>
<option value="">10 am</option>
<option value="">10:30am</option>
<option value="">11 am</option>
<option value="">11:30am</option>
<option value="">12:30 pm</option>
<option value="">1:00pm</option><option value="">1:30pm</option>
</select>
</div>
<div class="sgl_part_div">
<span class="cmt">Select Session</span><span>:</span>
<select id="second" name="second" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">Session #1: Tues May 31st - Fri June 10th (1-5:30PM)</option>
<option value="">Session #2: Tues June 14th - Fri June 24th (9-2:00PM)</option>
<option value="">Session #3: Tues June 28th - Fri July 8th (9-2:00PM)</option>
<option value="">Session #4: Tues July 12th - Fri July 22nd (9-2:00PM)</option>
<option value="">Session #5: Tues July 26th - Fri Aug 5th (9-2:00PM)</option>
<option value="">Session #6: Tues Aug 9th - Fri Aug 19th (9-2:00PM)</option>
</select>
</div>
<div class="sgl_part_div">
<span class="cmt">Select Time</span><span>:</span>
<select id="second" name="second" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">#1 only: 1pm</option>
<option value="">#1 only: 1:30pm</option>
<option value="">#1 only: 2pm</option>
<option value="">#1 only: 2:30pm</option>
<option value="">#1 only: 3:30pm</option>
<option value="">#1 only: 4pm</option>
<option value="">#1 only: 4:30 pm</option>
<option value="">#1 only: 5:00pm</option>
<option value="">9am</option>
<option value="">9:30am</option>
<option value="">10 am</option>
<option value="">10:30am</option>
<option value="">11 am</option>
<option value="">11:30am</option>
<option value="">12:30 pm</option>
<option value="">1:00pm</option><option value="">1:30pm</option>
</select>
</div>
<div class="sgl_part_div">
<span class="cmt">Select Session</span><span>:</span>
<select id="third" name="third" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">Session #1: Tues May 31st - Fri June 10th (1-5:30PM)</option>
<option value="">Session #2: Tues June 14th - Fri June 24th (9-2:00PM)</option>
<option value="">Session #3: Tues June 28th - Fri July 8th (9-2:00PM)</option>
<option value="">Session #4: Tues July 12th - Fri July 22nd (9-2:00PM)</option>
<option value="">Session #5: Tues July 26th - Fri Aug 5th (9-2:00PM)</option>
<option value="">Session #6: Tues Aug 9th - Fri Aug 19th (9-2:00PM)</option>
</select>
</div>
<div class="sgl_part_div">
<span class="cmt">Select Time</span><span>:</span>
<select id="third" name="third" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">#1 only: 1pm</option>
<option value="">#1 only: 1:30pm</option>
<option value="">#1 only: 2pm</option>
<option value="">#1 only: 2:30pm</option>
<option value="">#1 only: 3:30pm</option>
<option value="">#1 only: 4pm</option>
<option value="">#1 only: 4:30 pm</option>
<option value="">#1 only: 5:00pm</option>
<option value="">9am</option>
<option value="">9:30am</option>
<option value="">10 am</option>
<option value="">10:30am</option>
<option value="">11 am</option>
<option value="">11:30am</option>
<option value="">12:30 pm</option>
<option value="">1:00pm</option><option value="">1:30pm</option>
</select>
</div>
</div>
3 个答案:
答案 0 :(得分：0)
工作之间的事情很抱歉，你必须这样做：
http://jsfiddle.net/33Jy3/
它不是最漂亮的解决方案，但至少它保存了挑选的结果，你可以自己检查一下;）
对不起，如果不这样做，但我现在无法提供更多帮助= /
答案 1 :(得分：0)
您需要编写一个javascript函数，该函数将在表单中每个选择字段的每个onchange事件中调用。此函数将遍历每个选择字段并通过selectelement.options[ selectelement.selectedIndex ].value将其值提取到数组中，然后通过该数组查找您认为错误的任何匹配项。如果找到任何匹配项，则会在出错时拍摄alert。
答案 2 :(得分：0)
我已经为这个编写了代码。它正在工作。在下面找到结构。
HTML结构是，
<div class="line_div">
<p>You can enroll in one or more sessions:</p>
<div class="sgl_part_div">
<span class="cmt">Select Session</span><span>:</span>
<select id="country" name="country" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">Session #1: Tues May 31st - Fri June 10th (1-5:30PM)</option>
<option value="">Session #2: Tues June 14th - Fri June 24th (9-2:00PM)</option>
<option value="">Session #3: Tues June 28th - Fri July 8th (9-2:00PM)</option>
<option value="">Session #4: Tues July 12th - Fri July 22nd (9-2:00PM)</option>
<option value="">Session #5: Tues July 26th - Fri Aug 5th (9-2:00PM)</option>
<option value="">Session #6: Tues Aug 9th - Fri Aug 19th (9-2:00PM)</option>
</select>
</div>
<div class="sgl_part_div">
<span class="cmt">Select Time</span><span>:</span>
<select id="country" name="country" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">#1 only: 1pm</option>
<option value="">#1 only: 1:30pm</option>
<option value="">#1 only: 2pm</option>
<option value="">#1 only: 2:30pm</option>
<option value="">#1 only: 3:30pm</option>
<option value="">#1 only: 4pm</option>
<option value="">#1 only: 4:30 pm</option>
<option value="">#1 only: 5:00pm</option>
<option value="">9am</option>
<option value="">9:30am</option>
<option value="">10 am</option>
<option value="">10:30am</option>
<option value="">11 am</option>
<option value="">11:30am</option>
<option value="">12:30 pm</option>
<option value="">1:00pm</option><option value="">1:30pm</option>
</select>
</div>
<div class="sgl_part_div">
<span class="cmt">Select Session</span><span>:</span>
<select id="country" name="country" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">Session #1: Tues May 31st - Fri June 10th (1-5:30PM)</option>
<option value="">Session #2: Tues June 14th - Fri June 24th (9-2:00PM)</option>
<option value="">Session #3: Tues June 28th - Fri July 8th (9-2:00PM)</option>
<option value="">Session #4: Tues July 12th - Fri July 22nd (9-2:00PM)</option>
<option value="">Session #5: Tues July 26th - Fri Aug 5th (9-2:00PM)</option>
<option value="">Session #6: Tues Aug 9th - Fri Aug 19th (9-2:00PM)</option>
</select>
</div>
<div class="sgl_part_div">
<span class="cmt">Select Time</span><span>:</span>
<select id="country" name="country" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">#1 only: 1pm</option>
<option value="">#1 only: 1:30pm</option>
<option value="">#1 only: 2pm</option>
<option value="">#1 only: 2:30pm</option>
<option value="">#1 only: 3:30pm</option>
<option value="">#1 only: 4pm</option>
<option value="">#1 only: 4:30 pm</option>
<option value="">#1 only: 5:00pm</option>
<option value="">9am</option>
<option value="">9:30am</option>
<option value="">10 am</option>
<option value="">10:30am</option>
<option value="">11 am</option>
<option value="">11:30am</option>
<option value="">12:30 pm</option>
<option value="">1:00pm</option><option value="">1:30pm</option>
</select>
</div>
<div class="sgl_part_div">
<span class="cmt">Select Session</span><span>:</span>
<select id="country" name="country" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">Session #1: Tues May 31st - Fri June 10th (1-5:30PM)</option>
<option value="">Session #2: Tues June 14th - Fri June 24th (9-2:00PM)</option>
<option value="">Session #3: Tues June 28th - Fri July 8th (9-2:00PM)</option>
<option value="">Session #4: Tues July 12th - Fri July 22nd (9-2:00PM)</option>
<option value="">Session #5: Tues July 26th - Fri Aug 5th (9-2:00PM)</option>
<option value="">Session #6: Tues Aug 9th - Fri Aug 19th (9-2:00PM)</option>
</select>
</div>
<div class="sgl_part_div">
<span class="cmt">Select Time</span><span>:</span>
<select id="country" name="country" class="tx_bx" value="">
<option value="">- Select -</option>
<option value="">#1 only: 1pm</option>
<option value="">#1 only: 1:30pm</option>
<option value="">#1 only: 2pm</option>
<option value="">#1 only: 2:30pm</option>
<option value="">#1 only: 3:30pm</option>
<option value="">#1 only: 4pm</option>
<option value="">#1 only: 4:30 pm</option>
<option value="">#1 only: 5:00pm</option>
<option value="">9am</option>
<option value="">9:30am</option>
<option value="">10 am</option>
<option value="">10:30am</option>
<option value="">11 am</option>
<option value="">11:30am</option>
<option value="">12:30 pm</option>
<option value="">1:00pm</option><option value="">1:30pm</option>
</select>
</div>
</div>
脚本是，
<script type="text/javascript">
function chng(index)
{
selectelement = document.getElementById('first1');
selectelementtime = document.getElementById('first_time1');
var seltxt = selectelement.options[ selectelement.selectedIndex ].value;
var seltime = selectelementtime.options[ selectelementtime.selectedIndex ].value;
var session_time = seltxt+seltime;
selectelement1 = document.getElementById('first2');
selectelementtime1 = document.getElementById('first_time2');
var seltxt1 = selectelement1.options[ selectelement1.selectedIndex ].value;
var seltime1 = selectelementtime1.options[ selectelementtime1.selectedIndex ].value;
var session_time1 = seltxt1+seltime1;
selectelement2 = document.getElementById('first3');
selectelementtime2 = document.getElementById('first_time3');
var seltxt2 = selectelement2.options[ selectelement2.selectedIndex ].value;
var seltime2 = selectelementtime2.options[ selectelementtime2.selectedIndex ].value;
var session_time2 = seltxt2+seltime2;
//alert(session_time1);
//alert(session_time);
//alert(session_time2);
if(session_time == session_time1 || session_time1 == session_time2 || session_time2 == session_time )
{
alert("Matches Found");
var selopt = "first"+index;
var seltime = "first_time"+index;
document.getElementById(selopt).options.selectedIndex = 0;
document.getElementById(seltime).options.selectedIndex = 0;
}
}
</script>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？