Как я могу сравнить набор значений выбранного блока с другим набором значений выбранного блока?

Question

У меня есть форма с выбранными полями, как показано ниже.

Мне нужно сгруппировать первые два поля выбора «Выбрать сеанс» и «Выбрать время», мне нужно разрешить выбирать уникальные сеансы и время для каждой пары раскрывающихся списков.Если я выбрал один сеанс и время в одном раскрывающемся списке, и снова я выбрал тот же сеанс и время в нижеприведенных выпадающих сообщениях, тогда мне нужно будет отобразить сообщение об ошибке, например «Тот же сеанс и время уже выбрано».

Как я могу это сделать? .. 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>

Answer 1

Вам необходимо написать функцию javascript, которая будет вызываться при каждом событии onchange каждого поля выбора в вашей форме. Эта функция будет проходить через каждое поле выбора и извлекать их значение в массив через selectelement.options[ selectelement.selectedIndex ].value, а затем проходить через этот массив, чтобы найти любые совпадения, которые вы сочтете неправильными. Если найдено какое-либо совпадение, вы стреляете alert с ошибкой.

Answer 2

Я написал код для этого. работает. Найти под структурой.

Структура 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>

Answer 3

что-то для работы встало между этим извините, вам придется сделать это с этим: http://jsfiddle.net/33Jy3/

это не самое красивое решение, но, по крайней мере, оно сохраняет выбранные результаты, и вы можете сами проверить их;)

извините, если этого не произойдет, но сейчас я не могу оказать вам большую помощь = /