Скрыть невыбранные <options> из <select>

162

08 мая 2019, 20:40

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

document.getElementsByClassName('group')[0].addEventListener('click', function(evt) { 
  var elem = evt.target; 
  if (elem.hasAttribute('data-select')) { 
    document.getElementById('select').value = elem.getAttribute('data-select'); 
 
    var elem = document.getElementById('select'); 
    var event = new Event('change'); 
    elem.dispatchEvent(event); 
  } 
}, false);

<div class="group"> 
  <label class="primary"> 
<input data-select="3" type="button">Кнопка 1</label> 
  <label class="primary"> 
<input data-select="4" type="button">Кнопка 2</label> 
</div> 
<select id="select"> 
  <option value="1">Выбор пункта 1</option> 
  <option value="2">Выбор пункта 2</option> 
  <option value="3">Выбор пункта 3</option> 
  <option value="4">Выбор пункта 4</option> 
  <option value="5">Выбор пункта 5</option> 
  <option value="6" checked>Выбор пункта 6</option> 
</select>

Answer 1

Например, так: В моём примере перебираются все тэги option, которые находятся внутри select. Если option.value !== select.value, то option становится неактивным, иначе - наоборот.

 document.getElementsByClassName('group')[0].addEventListener('click', function(evt) { 
    var elem = evt.target; 
    if (elem.hasAttribute('data-select')) { 
      let select = document.getElementById('select'); 
      select.value = elem.getAttribute('data-select'); 
       
      let options = select.getElementsByTagName('option'); 
      Array.from(options, (option, i) => options[i].disabled = (option.value !== select.value ? true : false)); 
       
      var elem = document.getElementById('select'); 
      var event = new Event('change'); 
      elem.dispatchEvent(event); 
    } 
  }, false);

<div class="group"> 
  <label class="primary"> 
<input data-select="3" type="button">Кнопка 1</label> 
  <label class="primary"> 
<input data-select="4" type="button">Кнопка 2</label> 
</div> 
<select id="select"> 
  <option value="1">Выбор пункта 1</option> 
  <option value="2">Выбор пункта 2</option> 
  <option value="3">Выбор пункта 3</option> 
  <option value="4">Выбор пункта 4</option> 
  <option value="5">Выбор пункта 5</option> 
  <option value="6" checked>Выбор пункта 6</option> 
</select>

Аналогичный пример, но со скрытием не выбранных option:

document.getElementsByClassName('group')[0].addEventListener('click', function(evt) { 
  var elem = evt.target; 
  if (elem.hasAttribute('data-select')) { 
    let select = document.getElementById('select'); 
    select.value = elem.getAttribute('data-select'); 
 
    let options = select.getElementsByTagName('option'); 
    Array.from(options, (option, i) => options[i].style.display = (option.value !== select.value ? 'none' : 'block')); 
 
    var elem = document.getElementById('select'); 
    var event = new Event('change'); 
    elem.dispatchEvent(event); 
  } 
}, false);

<div class="group"> 
  <label class="primary"> 
<input data-select="3" type="button">Кнопка 1</label> 
  <label class="primary"> 
<input data-select="4" type="button">Кнопка 2</label> 
</div> 
<select id="select"> 
  <option value="1">Выбор пункта 1</option> 
  <option value="2">Выбор пункта 2</option> 
  <option value="3">Выбор пункта 3</option> 
  <option value="4">Выбор пункта 4</option> 
  <option value="5">Выбор пункта 5</option> 
  <option value="6" checked>Выбор пункта 6</option> 
</select>