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

Question

У меня есть 2 выбора входа, где, если я выбираю из первого и второго, имеют одинаковые значения, отключите от второго входа, выберите только эту опцию, чтобы заблокировать пользователя для выбора 2 одинаковых значений.вот мой HTML:

    $(document).ready(function(){
      $('#tip_rola1').change(function(){
        var tip_rola1 = $(this).val();

      $('#tip_rola2').change(function(){
        var tip_rola2 = $(this).val();
        var n1 = tip_rola1;
        if(tip_rola1 === tip_rola2) {
          alert(tip_rola2);
         
        }

      })
        

      })

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>select 1</span>
<select class="form-control show_data1" id="tip_rola1" name="tip_rola2">
   <option selected=""> Select</option>
   <option value="8"> 70</option>
   <option value="9"> 76</option>
   <option value="10"> 80</option>
   <option value="11"> 84</option>
   <option value="12"> 35</option>
   <option value="13"> 38</option>
   <option value="14"> 40</option>
   <option value="15"> 42</option>
</select>
<span>select 2</span>
<select class="form-control show_data2" id="tip_rola2" name="tip_rola2">
   <option selected=""> Select</option>
   <option value="8"> 70</option>
   <option value="9"> 76</option>
   <option value="10"> 80</option>
   <option value="11"> 84</option>
   <option value="12"> 35</option>
   <option value="13"> 38</option>
   <option value="14"> 40</option>
   <option value="15"> 42</option>
</select>

Если выбрать 1 при изменении, иметь те же значения, что и 2 при выборе 2, я хочу отключить этот параметр, который был выбран при первом выборе.

Обновление для нескольких человек, которые думают, что я ничего не пробовал, и я просто спрашиваю.

Answer 1

Привет, вы можете добавить function и отправить event в качестве аргумента следующим образом:

	const validate = event => {       

    const id = event.target.id;      
    const dropdowns = ['tip_rola1','tip_rola2'];
    const dropdownId = dropdowns.filter(x => x !== id)[0];
    
    const dropdownOne = document.getElementById(dropdownId);   
    const dropdownSelected = document.getElementById(id);    
    
    if(event.target.value === dropdownOne.value){
      dropdownOne.setAttribute('disabled','');
      dropdownSelected.setAttribute('disabled', '');     
    }
    else {      
      dropdownSelected.removeAttribute('disabled'); 
      dropdownOne.removeAttribute('disabled'); 
    }    
}

	
<span>select 1</span>
<select class="form-control show_data1" id="tip_rola1" onchange="validate(event)" name="tip_rola2">
   <option selected=""> Select</option>
   <option value="8"> 70</option>
   <option value="9"> 76</option>
   <option value="10"> 80</option>
   <option value="11"> 84</option>
   <option value="12"> 35</option>
   <option value="13"> 38</option>
   <option value="14"> 40</option>
   <option value="15"> 42</option>
</select>
<span>select 2</span>
<select class="form-control show_data2" id="tip_rola2" onchange="validate(event)" name="tip_rola2">
   <option selected=""> Select</option>
   <option value="8"> 70</option>
   <option value="9"> 76</option>
   <option value="10"> 80</option>
   <option value="11"> 84</option>
   <option value="12"> 35</option>
   <option value="13"> 38</option>
   <option value="14"> 40</option>
   <option value="15"> 42</option>
</select>

Answer 2

Ответ:

• HTMLSelectElement уже содержит HTMLCollection опционных элементов для каждого поля.Это доступно через HTMLSelectElement.options.Вам не нужно делать отдельный запрос, чтобы получить эти элементы.

• Помните , что options возвращает HTMLCollection, а не Array, он не поставляется с такими методами Array, как forEach, но он все еще итерируем, используя цикл for.

• HTMLSelectElement также имеетselectedIndex свойство, которое обозначает, какое option было выбрано.Это позволяет нам получить текущую выбранную опцию следующим образом: HTMLSelectElement.options[ HTMLSelectElement.selectedIndex ].

---

Ваш change прослушиватель событий может быть настроен следующим образом, чтобы получить желаемый эффект:

// Get selected value of first Select
  const selected = s.options[s.selectedIndex].value;

// Adjust second Select options 
  for (let opt of s2.options) {
    opt.disabled = opt.value === selected;
  }

Пример:

let [s, s2] = document.querySelectorAll("select");

s.addEventListener("change", function() {
  const selected = s.options[s.selectedIndex].value;
  for (let opt of s2.options) {
    opt.disabled = opt.value === selected;
  }
});

<span>select 1</span>
<select class="form-control show_data1" id="tip_rola1" name="tip_rola2">
  <option selected=""> Select</option>
  <option value="8"> 70</option>
  <option value="9"> 76</option>
  <option value="10"> 80</option>
  <option value="11"> 84</option>
  <option value="12"> 35</option>
  <option value="13"> 38</option>
  <option value="14"> 40</option>
  <option value="15"> 42</option>
</select>
<span>select 2</span>
<select class="form-control show_data2" id="tip_rola2" name="tip_rola2">
  <option selected=""> Select</option>
  <option value="8"> 70</option>
  <option value="9"> 76</option>
  <option value="10"> 80</option>
  <option value="11"> 84</option>
  <option value="12"> 35</option>
  <option value="13"> 38</option>
  <option value="14"> 40</option>
  <option value="15"> 42</option>
</select>

Answer 3

Вы не проявили никаких собственных усилий, но, учитывая, что вы новичок и решение довольно простое, вот фрагмент, демонстрирующий желаемое поведение.Всякий раз, когда изменяется один из вариантов выбора, перебирайте опции в другом и устанавливайте их атрибуты disabled, либо на true, если он имеет то же значение, что и выбранный в измененном выборе, в противном случае на false.

Кстати, ваш первый выбор с id="tip_rola1" также должен иметь атрибут name, установленный на "tip_rola1" вместо "tip_rola2".

function selectChangehandler(event) {
  let thisSelect = event.target;
  let otherSelect = document.getElementById(`tip_rola${thisSelect.id === 'tip_rola1' ? 2 : 1}`);
  otherSelect.querySelectorAll('option').forEach(function(option) {
    option.disabled = option.value === thisSelect.value;
  });
}

document.getElementById('tip_rola1').addEventListener('change', selectChangehandler);
document.getElementById('tip_rola2').addEventListener('change', selectChangehandler);

<span>select 1</span>
<select class="form-control show_data1" id="tip_rola1" name="tip_rola1">
   <option selected=""> Select</option>
   <option value="8"> 70</option>
   <option value="9"> 76</option>
   <option value="10"> 80</option>
   <option value="11"> 84</option>
   <option value="12"> 35</option>
   <option value="13"> 38</option>
   <option value="14"> 40</option>
   <option value="15"> 42</option>
</select>
<span>select 2</span>
<select class="form-control show_data2" id="tip_rola2" name="tip_rola2">
   <option selected=""> Select</option>
   <option value="8"> 70</option>
   <option value="9"> 76</option>
   <option value="10"> 80</option>
   <option value="11"> 84</option>
   <option value="12"> 35</option>
   <option value="13"> 38</option>
   <option value="14"> 40</option>
   <option value="15"> 42</option>
</select>