Как скрыть несколько элементов option

Question

Как скрыть несколько элементов option. При выборе moLc == '1234 Б2 "БББ"' чтобы скрывались в moLc <option>г. Москва</option> и <option>г. Лондон</option>

function test1(){
var select = document.querySelector('#moAddresLc');

    if($("#moLc").val() == '123 А1"ААА"'){
        select.value ='г. Москва';
    }
    
    if($("#moLc").val() == '1234 Б2 "БББ"'){    
    //Нужно скрыть 'г. Москва' и 'г. Лондон'
}

    }

HTML

<select class="form-control input-sm" id="moLc" onclick="test1()" title="Введите"><option>123 А1"ААА"</option><option>1234 Б2 "БББ"</option></select>

<select class="form-control input-sm" id="moAddresLc" onclick="test2()" title="Введите"><option>г. Москва</option><option>г. Лондон</option><option>г.  Торонто</option></select>

Answer 1

function test1() {
  if (moLc.value == '123 А1"ААА"') {
    moAddresLc.value = 'г. Москва';
  }
  
  if (moLc.value == '1234 Б2 "БББ"') {
    moAddresLc.value = 'г. Торонто';
  }

  for (option of moAddresLc) {
    option.style.display = moLc.value == '1234 Б2 "БББ"' && ~['г. Москва', 'г. Лондон'].indexOf(option.innerText) ? 'none' : '';
  }

}

<select class="form-control input-sm" id="moLc" onchange="test1()" title="Введите">
  <option>123 А1"ААА"</option>
  <option>1234 Б2 "БББ"</option>
</select>

<select class="form-control input-sm" id="moAddresLc" title="Введите">
  <option>г. Москва</option>
  <option>г. Лондон</option>
  <option>г. Торонто</option>
</select>

Answer 2

Вы можете обойти (for) элементы options и применить к ним какие-то правила (if). Для сокрытия option удобно использовать атрибут disabled. Вы можете скрыть disabled option с помощью css.

let options = document.querySelectorAll('option')
for (let i = 0; i < options.length; ++i) {
  let option = options[i]
  if (option.text == 'foo' || option.text == 'bar') {
    option.setAttribute('disabled', '')
  } else {
    option.removeAttribute('disabled')
  }
}

option[disabled] {
  display: none;
}

<select>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
</select>

Обратите внимание, что фильтровать лучше не по тексту option, а по атрибуту value (подумайте о том, чтобы начать использовать его). Устанавливать соответствие $("#moLc").val() и списка значений городов, которые надо скрыть можно через мап типа {'1234 Б2 "БББ"': ['г. Москва', 'г. Лондон']}. Вы можете использовать each вместо нативного for или forEach, если вы используете jq.

Answer 3

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

Вот "универсальный" скрипт, который будет прятать в зависимости от того, что будет указано в атрибуте у option во втором select.

let one = $('#moLc'),
    two = $('#moAddresLc');

one.on('change', function() {
  let id = $('option:selected').attr('data-id'); // Получаем ID выбранного элемента из атрибута data-id
  
  two // Обращаемся к второму селектору
    .find('option[data-show]') // находим все option с атрибутом `data-show`
    .hide() // прячем их через `display: none`
    .prop({ // выставляем значения атрибутов
      'disabled': true, // disabled - отключаем их выбор
      'selected': false // снимаем у них выбор `selected`, если он есть
    });
  
  two // тут для "включения"
    .find(`option[data-show~="${id}"]`) // находим `option` с `data-show` совпадающий с ID
    .prop('disabled', false) // включаем их выбор
    .show() // Показываем
    .eq(0) // Выбираем первый из списка
    .prop('selected', true); // И ставим ему `selected`, чтобы он отображался в `select`
})
.trigger('change'); // Запускаем верхний код при инициализации скрипта.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control input-sm" id="moLc" title="Введите">
  <option data-id="1">123 А1"ААА"</option>
  <option data-id="2">1234 Б2 "БББ"</option>
</select>

<select class="form-control input-sm" id="moAddresLc">
  <option data-show="1">г. Москва</option>
  <option data-show="2">г. Лондон</option>
  <option data-show="1 2">г. Торонто</option>
</select>

Так же у второго select в data-show у option можно указывать несколько IDов, через пробел, тем самым сделать его отображаемым для нескольких data-id из первого select.

Так же из кода можно убрать .hide() и .show(), и отключать отображение этих элементов через CSS:

let one = $('#moLc'),
    two = $('#moAddresLc');

one.on('change', function() {
  let id = $('option:selected').attr('data-id');
  
  two
    .find('option[data-show]')
    .prop({'disabled': true, 'selected': false});
    
  two
    .find(`option[data-show~="${id}"]`)
    .prop('disabled', false)
    .eq(0)
    .prop('selected', true);
}).trigger('change');

#moAddresLc option:disabled {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control input-sm" id="moLc" title="Введите">
  <option data-id="1">123 А1"ААА"</option>
  <option data-id="2">1234 Б2 "БББ"</option>
</select>

<select class="form-control input-sm" id="moAddresLc">
  <option data-show="1">г. Москва</option>
  <option data-show="2">г. Лондон</option>
  <option data-show="1 2">г. Торонто</option>
</select>

БЛОГ НА HUSL

Как скрыть несколько элементов option

Ответы (3 шт):