Question

我需要一个简单的条件选择，我的html表单就像这个例子（还没有任何JS和CSS）。

逻辑：如果为任何'value'或任何'comment'选择了类别1，则只会在选择类别2 ，类别3 <上显示/ strong>和 Category4 ， Category1 只有'rel'个标记。

＆＃13;
＆＃13;
<select id='category1' required> <option rel='A' value='value1'>Option One</option> <option rel='A' value='value2'>Option Two</option> <option rel='C' value='value3'>Option Three</option> <option rel='B' value='value4'>Option Four</option> <option rel='C' value='value5'>Option Five</option> </select> <select id='category2' required> <option rel='A' value='value11'>Sub A</option> <option rel='A' value='value12'>Sub B</option> <option rel='A' value='value13'>Sub C</option> <option rel='B' value='value14'>Sub D</option> <option rel='B' value='value15'>Sub E</option> <option rel='C' value='value16'>Sub F</option> <option rel='C' value='value17'>Sub G</option> <option rel='A' value='value18'>Sub H</option> </select> <select id='category3' required> <option rel='A' value='AAA'>Some A</option> <option rel='B' value='BBB'>Some B</option> <option rel='C' value='CCC'>Some C</option> </select> <select id='category4'> <option rel='A' value='DDD'>Other A</option> <option rel='B' value='EEE'>Other B</option> <option rel='B' value='FFF'>Other C</option> <option rel='B' value='GGG'>Other C</option> </select>
＆＃13;
＆＃13;
＆＃13;

Answer 1

我认为这是你正在寻找的;至少它的开始。

https://jsfiddle.net/v5xvcsub/

document.getElementById("category1").addEventListener("change", function(e) {
  var selectedRel = this.options[this.selectedIndex].getAttribute('rel');

  var selects = document.getElementsByTagName('select');
  for (index = 0; index < selects.length; ++index) {
    // deal with inputs[index] element.
    select = selects[index];
    if (select.id !== "category1") {
      var options = select.options;
      for (index in options) {
        try {
          if (options[index].getAttribute('rel') == selectedRel) {
            options[index].style.display = null;
          } else {
            options[index].style.display = "none";
          }
        } catch (e) {
          //fail silently for invalid input
        }
      }
    }
  }
});

当选择category1中的某个项目时，它会循环显示其他选项，然后循环浏览各自的选项。

Answer 2

现在正在工作，感谢“触发器”。

特别感谢Bro Arga的完成。

document.getElementById("category1").addEventListener("change", function(e) {
  var selectedRel = this.options[this.selectedIndex].getAttribute('rel');

  var selects = document.getElementsByTagName('select');
  for (index = 0; index < selects.length; ++index) {
    // deal with inputs[index] element.
    select = selects[index];
    if (select.id !== "category1") {
      var options = select.options;
      console.log(select);
      for (idx in options) {
        console.log(options[idx]);
        try {
          if (options[idx].getAttribute('rel') == selectedRel) {
            options[idx].style.display = null;
          } else {
            options[idx].style.display = "none";
          }
        } catch (e) {
          //fail silently for invalid input
        }
      }
    }
  }
});

<select id='category1' required>
  <option rel='A' value='value1'>Option One</option>
  <option rel='A' value='value2'>Option Two</option>
  <option rel='C' value='value3'>Option Three</option>
  <option rel='B' value='value4'>Option Four</option>
  <option rel='C' value='value5'>Option Five</option>
</select>

<select id='category2' required>
  <option rel='A' value='value11'>Sub A</option>
  <option rel='A' value='value12'>Sub B</option>
  <option rel='A' value='value13'>Sub C</option>
  <option rel='B' value='value14'>Sub D</option>
  <option rel='B' value='value15'>Sub E</option>
  <option rel='C' value='value16'>Sub F</option>
  <option rel='C' value='value17'>Sub G</option>
  <option rel='A' value='value18'>Sub H</option>
</select>

<select id='category3' required>
  <option rel='A' value='AAA'>Some A</option>
  <option rel='B' value='BBB'>Some B</option>
  <option rel='C' value='CCC'>Some C</option>
</select>

<select id='category4'>
  <option rel='A' value='DDD'>Other A</option>
  <option rel='B' value='EEE'>Other B</option>
  <option rel='B' value='FFF'>Other C</option>
  <option rel='B' value='GGG'>Other C</option>
</select>

Html + js;填充选择

2 个答案: