не позволяет выбрать одно и то же значение с двумя выпадающими

Question

Я хочу запретить пользователю выбирать одно и то же значение дважды в этой форме

<select name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <option> Applied Information and Communication Technology</option>
  <option> Arabic</option>
  <option> Art and Design</option>
  <option> Biology</option>
  <option> Business Studies</option>
</select>

<select name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <option> Applied Information and Communication Technology</option>
  <option> Arabic</option>
  <option> Art and Design</option>
  <option> Biology</option>
  <option> Business Studies</option>
</select>

Answer 1

Я не уверен, как вы выбираете элементы, поэтому для простоты я дам им идентификатор.

Пример: http://jsfiddle.net/x4E5Q/1/

function preventDupes( select, index ) {
    var options = select.options,
        len = options.length;
    while( len-- ) {
        options[ len ].disabled = false;
    }
    select.options[ index ].disabled = true;
    if( index === select.selectedIndex ) {
        alert('You\'ve already selected the item "' + select.options[index].text + '".\n\nPlease choose another.');
        this.selectedIndex = 0;
    }
}

var select1 = select = document.getElementById( 'select1' );
var select2 = select = document.getElementById( 'select2' );

select1.onchange = function() {
    preventDupes.call(this, select2, this.selectedIndex );
};

select2.onchange = function() {
    preventDupes.call(this, select1, this.selectedIndex );
};

html

<select id="select1" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <!-- ...and so on... -->

<select id="select2" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option> Accounting</option>
  <option> Afrikaans</option>
  <!-- ...and so on... -->

---

РЕДАКТИРОВАТЬ: Изменено для работы с браузерами, которые не поддерживают .disabled.Кредит @Zoidberg.

Answer 2

В конечном итоге, если вы можете позволить себе недвижимость, я бы вместо этого использовал радио кнопки или флажки и позволял им выбирать только 2 флажка максимум. Для меня выпадающие не работают в этой ситуации

Однако, если у вас нет недвижимости и вы должны использовать выпадающие списки, тогда вам лучше всего выбрать значение в первом раскрывающемся списке, отключить или удалить его во втором раскрывающемся списке и т. П. наоборот (если они выбирают значение в первом). Я бы порекомендовал отключить, а не удалять, поскольку пользователю будет более очевидно, что происходит.

<select id="subject1" onchange="updateSelect(this,'subject2');" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1');" >
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

Тогда JS, который идет с ним

function updateSelect(changedSelect, selectId) {
   var otherSelect = document.getElementById(selectId);
   for (var i = 0; i < otherSelect.options.length; ++i) {
       otherSelect.options[i].disabled = false;
   }
   if (changedSelect.selectedIndex == 0) {
      return;
   }
   otherSelect.options[changedSelect.selectedIndex].disabled = true;
}

Единственная проблема в том, что IE 7 и более ранние версии не поддерживают отключение. Если это нарушает условия сделки, вам придется удалить опцию из «Другой выбор», а затем заменить ее позже. Единственная проблема в том, что это изменит порядок параметров, если вы не обновите весь список. Чтобы обновить весь список, вам нужно будет хранить опции и значения в массиве (вроде модели), который никогда не изменяется и используется для обновления выбора, когда происходит событие изменения.

Answer 3

попробуйте это, добавьте id="indication_subject1" в выберите 1. и id="indication_subject2" в избранном 2.

Javascript:

$('#indication_subject1').change(function(){
    var indication_subject1 = $('#indication_subject1').val();
    var indication_subject2 = $('#indication_subject2').val();

    if (indication_subject1 == indication_subject1)
        {
            $('#indication_subject2').prop('selectedIndex',0);// val = "" selected, or you can add alert('Can't select same value!')

        }
});

$('#indication_subject2').change(function(){
    var indication_subject1 = $('#indication_subject1').val();
    var indication_subject2 = $('#indication_subject2').val();

    if (indication_subject2 == indication_subject1)
    {
        $('#indication_subject1').prop('selectedIndex',0);
    }
});