Параметры раскрывающегося меню HTML на основе ранее выбранной опции

Question

У меня есть 2 раскрывающихся меню HTML, и я хочу показать конкретные параметры в зависимости от того, что выбрано в первом.

                <div class="required field">
                  <label>Region:</label>
                  <select name="De1" class="ui fluid dropdown">
                   <option value="">Region</option>
                   <option value="NA">NA</option>
                   <option value="UK">UK</option>
                   <option value="CA">CA</option>
                   <option value="MX">MX</option>
                   <option value="Asia">Asia</option>
                   <option value="LATAM">LATAM</option>
                 </select>
               </div>
                <br>
                <div class="required field">
                  <label>Environment Tier:</label>
                  <select name="tier" class="ui fluid dropdown">
                   <option value="">Environment Tier</option>
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
                   <option value="4">4</option>
                 </select>
               </div>

Например, когда выбран NA, я хочу иметь возможность выбирать только от 1 до 3, а когда выбран UK, я хочу, чтобы 2,3 и 4 были вариантами.

Answer 1

Вы можете использовать событие onchange тега select, выбрать раскрывающийся список (второй, поскольку у вас есть два раскрывающихся списка) и проверить значение их детей, если оно соответствует тому, что вы хотите отключить. Я добавил комментарии для руководства

var objer = document.querySelector(".ui.fluid.dropdown")
objer.onchange = function() { // onchange function
    var e = document.querySelector(".ui.fluid.dropdown")// select the dropdown first one
    var text = e.options[e.selectedIndex].text; // select the text which is selected
    var arra = document.querySelectorAll(".required.field")[1].children[1].children;
    for (let item of arra){
        item.removeAttribute("disabled"); //remove all disabled attributes
    }
    switch (text) {// a switch case of what is selected
        case "NA": // if user selected "NA"
             // select the children of the second dropdown in a array
            for (let item of arra) {
                if (item.value != 3 && item.value != 1) { // check if the item's value is not equal to 3 and to 1
                    item.disabled = true  // disable that item
                }
            }
            break; 
        case "UK": // if user selected "UK"
            for (let item of arra) {
                if (item.value != 2 && item.value != 3 && item.value != 4) { // check if the item's value is not equal to 2 and to 3,4 and equal to 1
                    item.disabled = true;
                }
            }
            break;
    }
}

<div class="required field">
  <label>Region:</label>
  <select name="De1" class="ui fluid dropdown">
     <option value="">Region</option>
     <option value="NA">NA</option>
     <option value="UK">UK</option>
     <option value="CA">CA</option>
     <option value="MX">MX</option>
     <option value="Asia">Asia</option>
     <option value="LATAM">LATAM</option>
   </select>
</div>
<br>
<div class="required field">
  <label>Environment Tier:</label>
  <select name="tier" class="ui fluid dropdown">
  <option value="">Environment Tier</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
   </select>
</div>

Если вы хотите отключить некоторые другие числа при выборе любой другой строки, просто добавьте регистр в регистр переключателя, например. из "CA" добавить case "CA": и определить условия в соответствии с вашими предпочтениями

Answer 2

Я привел простой пример того, как это можно сделать с помощью ванильного JavaScript.Я добавил комментарии на каждом шагу, надеюсь, это поможет:).

// map between options
var delTierMap = {
  NA: [{
      value: '1',
      label: 'Na 1'
    },
    {
      value: '3',
      label: 'Na 2'
    }

  ],
  UK: [{
      value: '1',
      label: 'UK tier 1'
    },
    {
      value: '2',
      label: 'UK tier 2',
    }
  ],
};

// select the first select
var del = document.querySelector('[name=De1]');

// listen for changes
del.addEventListener('change', function(event) {
  var value = event.target.value;

  // select options mapping for selected value
  var map = delTierMap[value];

  // clear up options
  var tier = document.querySelector('[name=tier]');
  tier.innerHTML = '';

  if (!map) {
    // unmmaped values
    return;
  }

  // create new options
  map.forEach(function(option) {
    // crete new html element
    var optionElement = document.createElement('option');
    optionElement.value = option.value;
    optionElement.label = option.label;
    
    console.log('created option', optionElement);
    
    tier.appendChild(optionElement);
  });
});

<div class="required field">
  <label>Region:</label>
  <select name="De1" class="ui fluid dropdown">
     <option value="">Region</option>
     <option value="NA">NA</option>
     <option value="UK">UK</option>
     <option value="CA">CA</option>
     <option value="MX">MX</option>
     <option value="Asia">Asia</option>
     <option value="LATAM">LATAM</option>
   </select>
</div>
<br>
<div class="required field">
  <label>Environment Tier:</label>
  <select name="tier" class="ui fluid dropdown">
   </select>
</div>