主页 / 问题 / 1399826
Accepted
rabbit
Asked:2022-06-13 20:50:30 +0000 UTC2022-06-13 20:50:30 +0000 UTC

根据选择的单选按钮从选择中删除特定选项

  • 772

我有两个单选按钮和一个在我的网站上设置了一个选项的选项，乍一看在我看来这很容易，但我已经坐了一个半小时，无法弄清楚如何实施它。

I need to remove specific options from select depending on the selected radio button, but in such a way that when another radio button is selected, return the removed options by removing others, i.e.:

这里有两个单选按钮 -radio1和radio2, 和一个下拉菜单select- option1,option2和option3,

当我选择radio1, 然后 和 被删除option1，option2当我选择radio2, 然后option3, BUT option1和被option2返回。

remove()通过、NOT 删除是必要的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>

javascript

3 个回答

  1. Best Answer

    你可以尝试一次得到所有东西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>

    • 1

  2. 使用 remove() 方法。在标记中，为您的选择提供一个 id：

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

    在脚本中：

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

    自己适应你的情况。

    • 0

  3. 简而言之：

    1. 创建选项
    2. 我们挂起用于更改单选按钮的处理程序
    3. 每次更改时，我们都会更改选项集并重新绘制选择

    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>

    • 0

相关问题