Блог

В настоящее время я пытаюсь скрыть инструкцию subcategory-select до тех пор, пока в моей первой инструкции select не будет выбрана основная категория. То же самое относится и к оператору select-type в подкатегории. Метод каскадного выпадающего списка, который я использую, тот же, который вы можете найти в w3schools, в противном случае код находится ниже.

Знаете ли вы, как я могу скрыть подкатегорию/тип, пока иерархия выбора выше не выбрана?

Например:

Выберите Основную категорию(по умолчанию «Выберите категорию)», когда я изменю «Выберите категорию» на «Основную категорию 1», появится инструкция select для подкатегории. Затем, когда выбран параметр Подкатегория, появляется инструкция typecategory select.

Надеюсь, вам ясно, что я хочу сделать. Кроме того, пожалуйста, извините меня за плохое использование английского языка. Английский — не мой родной язык.

 var maincatObject = {
  "MainCategory1": {
    "Subcategory 1.1": ["Type 1.1.1", "Type 1.1.2"],
    "Subcategory 1.2": ["Type 1.2.1", "Type 1.2.2"],
    "Subcategory 1.3": ["Type 1.3.1", "Type 1.3.2"],
    "Subcategory 1.4": ["Type 1.4.1", "Type 1.4.2"]
  },
  "MainCategory2": {
    "Subcategory 2.1": ["Type 2.1.1", "Type 2.1.2"],
    "Subcategory 2.2": ["Type 2.2.1", "Type 2.2.2"],
    "Subcategory 2.3": ["Type 2.3.1", "Type 2.3.2"],
    "Subcategory 2.4": ["Type 2.4.1", "Type 2.4.2"]
  }
}
window.onload = function() {
  var maincatSel = document.getElementById("maincat");
  var subcatSel = document.getElementById("subcat");
  var typedevSel = document.getElementById("typedev");
  for (var x in maincatObject) {
    maincatSel.options[maincatSel.options.length] = new Option(x, x);
  }
  maincatSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    typedevSel.length = 1;
    subcatSel.length = 1;
    //display correct values
    for (var y in maincatObject[this.value]) {
      subcatSel.options[subcatSel.options.length] = new Option(y, y);
    }
  }
  subcatSel.onchange = function() {
    //empty Chapters dropdown
    typedevSel.length = 1;
    //display correct values
    var z = maincatObject[maincatSel.value][this.value];
    for (var i = 0; i < z.length; i  ) {
      typedevSel.options[typedevSel.options.length] = new Option(z[i], z[i]);
    }
  }
} 

 <select name="maincat" id="maincat">
  <option value="" selected="selected">Select Category</option>
</select>
<br><br> Sub-Category:
<select name="subcat" id="subcat">
  <option value="" selected="selected">Please select sub-category first</option>
</select>
<br><br> Type/Device:
<select name="typedev" id="typedev">
  <option value="" selected="selected">Please select type or device</option>
</select>
<br><br> 

Решение:

Мне удалось это сделать, для тех из вас, кто задается вопросом, как я это сделал… вот измененный код JS:

 window.onload = function() {
  var maincatSel = document.getElementById("maincat");
  var subcatSel = document.getElementById("subcat");
  var typedevSel = document.getElementById("typedev");
  for (var x in maincatObject) {
    maincatSel.options[maincatSel.options.length] = new Option(x, x);
    subcatSel.style.display = 'none';
    typedevSel.style.display = 'none';
  }
  maincatSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    subcatSel.style.display = 'block';
    typedevSel.style.display = 'none';
    subcatSel.length = 1;
    typedevSel.length = 1;
    //display correct values
    for (var y in maincatObject[this.value]) {
      subcatSel.options[subcatSel.options.length] = new Option(y, y);
    }
  }
  subcatSel.onchange = function() {
    //empty Chapters dropdown
    typedevSel.style.display = 'block';
    typedevSel.length = 1;
    //display correct values
    var z = maincatObject[maincatSel.value][this.value];
    for (var i = 0; i < z.length; i  ) {
      typedevSel.options[typedevSel.options.length] = new Option(z[i], z[i]);
    }
  }
}
 

Хитрость заключалась в том, чтобы просто поместить «переменное имя.стиль.дисплей = «нет»/»блок»;» в нужное положение. Имейте в виду, что код читается сверху, а в остальном я просто использовал свой мозг, хе-хе. Я надеюсь, что это поможет всем, кто ищет ответы. 🙂

Попробуйте этот код

 <style>
    #sub1, #type1{
        display: none;
    }
</style>

<select name="main" id="main">
    <option value="0" selected>Select Option</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
</select>
<select name="sub1" id="sub1">
    <option value="0" selected>Select Option</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
</select>
<select name="type1" id="type1">
    <option value="0" selected>Select Option</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
</select>

<script>
    var main = document.getElementById('main');
    var sub1 = document.getElementById('sub1');
    var type1 = document.getElementById('type1');
    
    main.addEventListener('change', function(element){
        if(element.target.value == 'value1'){
            sub1.style.display = 'block';
        }else{
            sub1.style.display = 'none';
        }
    });
    
    sub1.addEventListener('change', function(element){
        if(element.target.value == 'value1'){
            type1.style.display = 'block';
        }else{
            type1.style.display = 'none';
        }
    });
</script>