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

您可以使用select标记的onchange事件，选择下拉菜单（第二个下拉菜单，因为您有两个下拉菜单），并检查其子项的值（如果与您要禁用的项匹配）。我添加了评论以供指导

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>

基于先前选择的选项的HTML下拉菜单选项

2 个答案: