文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将一组选定的框值与另一组选定的框值进行比较？

问如何将一组选定的框值与另一组选定的框值进行比较？
EN

Stack Overflow用户
提问于 2012-01-17 18:25:38
回答 3查看 433关注 0票数 0

我有一个表单与选定的框如下所示。

​

我需要分组的前两个选择框“选择会话”和“选择时间”，我需要允许选择唯一的会话和时间为每对下拉。如果我在一个下拉列表中选择了一个会话和时间，并且在下面的下拉列表中再次选择了相同的会话和时间，那么我必须弹出错误消息，如“已选择相同的会话和时间”。

我该怎么做？..HTML代码是

代码语言：javascript
复制
 <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>
jquery
forms
drop-down-menu
php
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-01-19 12:29:56

我已经为这个写了代码。起作用了。在结构下面找到。

HTML结构是，

代码语言：javascript
复制
    <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>

脚本是这样的：

代码语言：javascript
复制
<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>
票数 0
EN

Stack Overflow用户

发布于 2012-01-17 19:24:09

在这中间有一些工作的东西对不起，你必须这样做：http://jsfiddle.net/33Jy3/

它不是最漂亮的解决方案，但至少它保存了挑选的结果，然后你可以自己检查它们;)

如果这不起作用，我很抱歉，但我现在不能提供更多的帮助=/

票数 0
EN

Stack Overflow用户

发布于 2012-01-17 21:02:50

您需要编写一个javascript函数，该函数将在表单中每个选择字段的每个onchange事件上被调用。此函数将遍历每个选择字段，并通过selectelement.options[ selectelement.selectedIndex ].value将它们的值提取到一个数组中，然后遍历该数组以查找您认为错误的任何匹配。如果找到任何匹配项，则使用alert并返回一个错误。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/8892990

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档