Question

I have the form with selected boxes like below.

i need to group the first two select boxes “Select Session” and “Select Time”, i need to allow select unique sessions and time for each pair of dropdowns. If i selected one session and time in one drop down and again i selected the same session and time in the below dropodwns that time i have to pop up the error message like “Same session and time Already Selected”.

How can i do this?.. the HTML code is

 <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>

Answer 1

I have written the code for this one. it’s working. Find below the structure.

HTML Structure is,

    <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>

And the script is,

<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>