如何制作二级选择选项？

Question

我需要两个使两个级别的选择选项。如果选择了bmw，如何显示bmwsubcategory？

如果选择audi，如何从html中删除bmwsubcategory并显示audisubcategory？

<select id="category">
  <option class="bmwsubcategory" value="bmw">bmw</option>
  <option class="audisubcategory" value="audi">audi</option>
  <option class="fordsubcategory" value="ford">ford</option>
  <option class="fiatsubcategory" value="fiat">fiat</option>
</select>

<select class="bmwsubcategory" name="bmw">
  <option value="bmw 1">bmw 1</option>
  <option value="bmw 2">bmw 2</option>
  <option value="bmw 3">bmw 3</option>
  <option value="bmw 4">bmw 4</option>
</select>

<select class="audisubcategory" name="audi">
  <option value="audi 1">audi 1</option>
  <option value="audi 2">audi 2</option>
  <option value="audi 3">audi 3</option>
  <option value="audi 4">audi 4</option>
</select>

<select class="fordsubcategory" name="ford">
  <option value="ford 1">ford 1</option>
  <option value="ford 2">ford 2</option>
  <option value="ford 3">ford 3</option>
  <option value="ford 4">ford 4</option>
</select>

<select class="fiatsubcategory" name="fiat">
  <option value="fiat 1">fiat 1</option>
  <option value="fiat 2">fiat 2</option>
  <option value="fiat 3">fiat 3</option>
  <option value="fiat 4">fiat 4</option>
</select>

Answer 1

代替使用多个选择元素，而是使用动态选择选项

//create an object containg  key as category with value subcategory array
var subcategories = {

  bmw : ["bmw 1","bmw 2","bmw 3","bmw 4"],
  audi : ["audi 1","audi 2","audi 3","audi 4"],
  ford : ["ford 1","ford 2","ford 3","ford 4"],
  fiat : ["fiat 1","fiat 2","fiat 3","fiat 4"],
  
}

//on change handler
//invoked when user select a category
function createSubcategory(){

  //get the category select elemeent
  var categorySelector = document.getElementById("category");
  //get the selected value
  var selectedCategory = categorySelector.options[categorySelector.selectedIndex].value;


    //get the subcategory select element
    var subCategorySelector = document.getElementById("subcategory");


    //remove all options for previous category from subcategory selector
    //for removing items you have to iterate from last index
    for (var count = subCategorySelector.options.length;count >0;count --) {
        subCategorySelector.options.remove(count-1);

    }
    
    //set name for subcategory selector
    subCategorySelector.name = selectedCategory;

//if selected option is not the first option (placeholder)
//add subcategory options
  if(selectedCategory != ""){

    //get subcategory options by using selectedCategory as key
    var subCategory = subcategories[selectedCategory];


    //for each subcategory option create option element and add it to subcategory selector 
    for (var count = 0;count < subCategory.length;count ++) {
         var option = document.createElement("option");
         option.text = subCategory[count];
         option.value = subCategory[count];
         subCategorySelector.options.add(option, count);


    }
  }
  
 
}

<select id="category" onchange="createSubcategory()" >
  <option  value="">Please Select a category </option>
	<option class="bmwsubcategory" value="bmw">bmw</option>
	<option class="audisubcategory" value="audi">audi</option>
	<option class="fordsubcategory" value="ford">ford</option>
	<option class="fiatsubcategory" value="fiat">fiat</option>
</select>


<!-- You dont need to create dropdown for every category 
    use javascript to create subcategory dropdown dynamically-->
<select id="subcategory" >
</select>

Answer 2

您的HTML结构很好，所以非常简单，首先隐藏所有选择，可以使用CSS，然后可以使用此JS显示正确的选择：

document.querySelector('#category').addEventListener('change', function(e) {
   // get all selects
   var selects = [...document.querySelectorAll('select.bmwsubcategory, select.audisubcategory, select.fordsubcategory, select.fiatsubcategory')];
   // hide all
   selects.forEach((select) => select.style.display = 'none');
   // show selected one
   document.querySelector('[name="' + e.target.value + '"]').style.display = 'block';
});

select.bmwsubcategory, select.audisubcategory, select.fordsubcategory, select.fiatsubcategory {
   display: none;
}

<select id="category">
  <option class="bmwsubcategory" value="bmw">bmw</option>
  <option class="audisubcategory" value="audi">audi</option>
  <option class="fordsubcategory" value="ford">ford</option>
  <option class="fiatsubcategory" value="fiat">fiat</option>
</select>

<select class="bmwsubcategory" name="bmw">
  <option value="bmw 1">bmw 1</option>
  <option value="bmw 2">bmw 2</option>
  <option value="bmw 3">bmw 3</option>
  <option value="bmw 4">bmw 4</option>
</select>

<select class="audisubcategory" name="audi">
  <option value="audi 1">audi 1</option>
  <option value="audi 2">audi 2</option>
  <option value="audi 3">audi 3</option>
  <option value="audi 4">audi 4</option>
</select>

<select class="fordsubcategory" name="ford">
  <option value="ford 1">ford 1</option>
  <option value="ford 2">ford 2</option>
  <option value="ford 3">ford 3</option>
  <option value="ford 4">ford 4</option>
</select>

<select class="fiatsubcategory" name="fiat">
  <option value="fiat 1">fiat 1</option>
  <option value="fiat 2">fiat 2</option>
  <option value="fiat 3">fiat 3</option>
  <option value="fiat 4">fiat 4</option>
</select>

另一种方法是对所有选择进行迭代，并检查是否应该可见：

selects.forEach((select) => {
   if (select.matches('[name="' + e.target.value + '"]')) {
       select.style.display = 'block';
   } else {
       select.style.display = 'none';
   }
});

注意：此代码使用了现代功能，可能无法在所有浏览器（特别是IE）中都起作用。

Answer 3

如果不需要动态数据，则可以编写脚本以仅显示选定的子类别，并隐藏其他子类别，例如此代码。我更改了一些属性。

~/.softlayer

Answer 4

您可以使用querySelector方法：

document.getElementById('category').addEventListener('change', () => {
  debugger
  let selected = document.querySelector('#category>option:checked');
  let active = document.getElementsByClassName('active')
  for (let i = 0; i < active.length; i++) active[0].classList.remove("active");
  document.getElementsByClassName(selected.className)[1].classList.add("active");
})

select.active {
  display: block
}

select{
  display: none
}
select#category{
  display: block
}

<select id="category">
  <option class="bmwsubcategory" value="bmw">bmw</option>
  <option class="audisubcategory" value="audi">audi</option>
  <option class="fordsubcategory" value="ford">ford</option>
  <option class="fiatsubcategory" value="fiat">fiat</option>
</select>



<select class="bmwsubcategory" name="bmw">
  <option value="bmw 1">bmw 1</option>
  <option value="bmw 2">bmw 2</option>
  <option value="bmw 3">bmw 3</option>
  <option value="bmw 4">bmw 4</option>
</select>

<select class="audisubcategory" name="audi">
  <option value="audi 1">audi 1</option>
  <option value="audi 2">audi 2</option>
  <option value="audi 3">audi 3</option>
  <option value="audi 4">audi 4</option>
</select>

<select class="fordsubcategory" name="ford">
  <option value="ford 1">ford 1</option>
  <option value="ford 2">ford 2</option>
  <option value="ford 3">ford 3</option>
  <option value="ford 4">ford 4</option>
</select>

<select class="fiatsubcategory" name="fiat">
  <option value="fiat 1">fiat 1</option>
  <option value="fiat 2">fiat 2</option>
  <option value="fiat 3">fiat 3</option>
  <option value="fiat 4">fiat 4</option>
</select>

Answer 5

尝试一下。希望它会有所帮助。

function category(value) {
    document.getElementById('bmwsubcategory').style.display = 'none';
    document.getElementById('audisubcategory').style.display = 'none';
    document.getElementById('fordsubcategory').style.display = 'none';
    document.getElementById('fiatsubcategory').style.display = 'none';
    document.getElementById(value+'subcategory').style.display = 'block';
    // document.getElementById('audisubcategory').style.display = 'none';
    if(value == 'audi') {
    }
}

.subcategory{
    display: none;
}

<select id="category" onchange="category(this.value)">
  <option value="bmw">bmw</option>
  <option value="audi">audi</option>
  <option value="ford">ford</option>
  <option value="fiat">fiat</option>
</select>

<select id="bmwsubcategory" name="bmw">
  <option value="bmw 1">bmw 1</option>
  <option value="bmw 2">bmw 2</option>
  <option value="bmw 3">bmw 3</option>
  <option value="bmw 4">bmw 4</option>
</select>

<select id="audisubcategory" class="subcategory" name="audi">
  <option value="audi 1">audi 1</option>
  <option value="audi 2">audi 2</option>
  <option value="audi 3">audi 3</option>
  <option value="audi 4">audi 4</option>
</select>

<select id="fordsubcategory" class="subcategory" name="ford">
  <option value="ford 1">ford 1</option>
  <option value="ford 2">ford 2</option>
  <option value="ford 3">ford 3</option>
  <option value="ford 4">ford 4</option>
</select>

<select id="fiatsubcategory" class="subcategory" name="fiat">
  <option value="fiat 1">fiat 1</option>
  <option value="fiat 2">fiat 2</option>
  <option value="fiat 3">fiat 3</option>
  <option value="fiat 4">fiat 4</option>
</select>