удалить конкретные option из select в зависимости от выбранной радиокнопки

Question

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

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

вот две радиокнопки - radio1 и radio2, и выпадающий select - option1, option2 и option3,

и когда я выбираю radio1, то удаляется option1 и option2, а когда выбираю radio2, то удаляется option3, НО option1 и option2 возвращаются.

Необходимо именно удаление, через remove(), НЕ display: none;, и <select> должен быть только один - в этом то вся и сложность!

Пожалуйста, помогите.

let options = [...document.querySelector("select").options];

document.querySelectorAll("input[name=sel]").forEach(function (current_radio) {
    current_radio.addEventListener("change", function () {
        if (current_radio.value === "one") {
        
        } else {
        
        }
    });
});

<input type="radio" name="sel" value="one" />
<input type="radio" name="sel" value="two" />

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Answer 1

с помощью метода remove(). в разметке присвойте id вашему select:

<select id="testRemove">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

в скрипте:

var sel = document.getElementById("testRemove");
sel.remove(2);  //удаляем по индексу 2, индекс начинается с 0

адаптируйте к вашему случаю сами.

Answer 2

можно попробовать получить один раз все options, и потом с ними работать

const wrapper = document.querySelector('.wrapper');

let options = null;

document.querySelectorAll("input[name=sel]").forEach(function (current_radio) {
  current_radio.addEventListener("change", function () {
    if(options === null) {
        // единоразовая операция. Можно сделать, сразу при инициализации переменной 
        options = [...wrapper.querySelectorAll('option')]
    }
    wrapper.innerHTML = ''
    options.forEach(el => {
      if(el.dataset.template === current_radio.value) {
        wrapper.appendChild(el);
      }
    });
  });
});

<input type="radio" name="sel" value="one" />
<input type="radio" name="sel" value="two" />

<select class='wrapper'>
    <option data-template='one'>1</option>
    <option data-template='one'>2</option>
    <option data-template='two'>3</option>
</select>

Answer 3

Если коротко:

Создаём варианты option
Вешаем обработчик на изменение радио кнопки
При каждом изменении меняем набор options и перерисовываем select

const options = [1,2,3];
const variants = {
  one: [3],
  two: [1, 2],
};

function handlerChangeVariant(e) {
  const variant = e.target.value;
  const select = document.getElementById('select');
  select.innerHTML = variants[variant].map((i) => `<option>${ i }</option>`).join('');
}

document.querySelectorAll('[type="radio"]').forEach((item) => {
  item.addEventListener('change', handlerChangeVariant)
});

<input type="radio" name="sel" value="one" />
<input type="radio" name="sel" value="two" />

<select id="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

БЛОГ НА HUSL

удалить конкретные option из select в зависимости от выбранной радиокнопки

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