Опции выпадающего меню HTML на основе ранее выбранной опции

ProgramBox

Опции выпадающего меню HTML на основе ранее выбранной опции

Post author:admin
Запись опубликована:30 апреля, 2023
Post category:Вопросы по программированию

#html #css #html-select #dropdown

#HTML #css #html-выбрать #выпадающий

Вопрос:

У меня есть 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.

Ответ №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 amp;amp; 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 amp;amp; item.value != 3 amp;amp; 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": и определите условия в соответствии с вашими предпочтениями

1. Обе эти опции работают в jfiddle и при запуске фрагмента кода, но по какой-то причине я не могу заставить их работать в моем проекте.

2. Я бы хотел, чтобы вы проверили консоль разработчика на наличие любых возможных ошибок. @Zone188

Ответ №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>