Javascript - How to show and hide an <option> per a dropdown selection?-CodePudding

Hope everything is fine! Please, I would like to know if there is a way of hidding an option in a dropdown following the selected answer of another dropdown. I tried to do it like this but it didn't work. THANK YOU!

HTML

<div  id="support_class">
  <label for="support_id">CMPA Support Needed</label>
  <select  id="support_id" name="support" onchange="enablePmaPmo(this)">
    <option value="" selected > Select                       </option>
    <option value="0"         > Both                         </option>
    <option value="1"         > PMA - Financial Management   </option>
    <option value="3"         > PMO - Project Administration </option>
  </select>
</div>
<div  id="band_pma_class">
  <label for="band_pma_id">Band (PMA)</label>
  <select  id="band_pma_id" name="band_pma">
    <option value="" selected                 > Select </option>
    <option value="four_pma" id="hide_pma_id" > B4     </option>
    <option value="five_pma"                  > B5     </option>
    <option value="six_pma"                   > B6     </option>
    <option value="seven_pma"                 > B7     </option>
  </select>

JAVASCRIPT

function disableBand(answer) {
  console.log(answer.value);
  if (answer.value == 1 || answer.value == 4) {
    document.getElementById('hide_pma_id').setAttribute('hidden');
  }
}

CodePudding user response：

Have a two sets of data - one to hold the first select options, the second that acts as a dictionary where each key is a country name, and its value is an array of options you want to add to the second select.

Add a change listener to the first select. When it's fired create a list of new options in the second select using the value from the select to lookup the options in the dictionary.

// Set up an array of countries, and an object with those
// countries as keys - their values will be whatever you want
// the second select updated with
const countries = ['Sweden', 'Norway', 'Germany'];
const options = { sweden: ['a', 'b', 'c'], norway: ['e', 'f', 'g'], germany: ['h', 'i', 'j'] };

// Initialise the country
const country = 'sweden';

// Cache the selects
const countriesSelect = document.querySelector('#countries');
const lettersSelect = document.querySelector('#letters');

// Add a change listener to the country select
countriesSelect.addEventListener('change', handleChange);

// Initialise the select options
countriesSelect.innerHTML = createOptions(countries);
updateLettersSelect(country);

// Get the value from the changed select
function handleChange(e) {
  const { value } = e.target;
  updateLettersSelect(value);  
}

// Update the second select with the values from
// the dictionary
function updateLettersSelect(value) {
  lettersSelect.innerHTML = createOptions(options[value]);
}

// Create some options
function createOptions(data) {
  return data.map(option => {
    return `
      <option value="${option.toLowerCase()}">
        ${option}
      </option>`;
  });
}

<select id="countries"></select>
<select id="letters"></select>

CodePudding user response：

You could use a css class that styles the nested option element to display: none and basically toggle the class using el.classList.add('classname') or el.classList.remove('classname') depending on the value the user changes in the select.

You will also need to check if the value of the second drop down is set to a restricted value prior to the user selecting the first value that then restricts it from being seen in DOM and then sets it to a restricted value (1 or 4). In this case the second selects value will need to be reset to an empty value, your default setting => value=''.

If this is not what you were looking for, let me know and I can further adjust my answer or remove it.

function disableBand(answer) {
  if (parseInt(answer.value) !== '') {
    if (parseInt(answer.value) === 1 || parseInt(answer.value) === 4) {
      document.getElementById('hide_pma_id').classList.add('hidden')
      document.getElementById('band_pma_id').value = ''
    } else {
      document.getElementById('hide_pma_id').classList.remove('hidden')
    }
  } 
}

.hidden {
  display: none;
}

<div  id="support_class">
  <label for="support_id">CMPA Support Needed</label>
  <select  id="support_id" name="support" onchange="disableBand(this)">
    <option value="" selected> Select </option>
    <option value="0"> Both </option>
    <option value="1"> PMA - Financial Management </option>
    <option value="3"> PMO - Project Administration </option>
  </select>
</div>
<div  id="band_pma_class">
  <label for="band_pma_id">Band (PMA)</label>
  <select  id="band_pma_id" name="band_pma">
    <option value="" selected> Select </option>
    <option value="four_pma" id="hide_pma_id"> B4 </option>
    <option value="five_pma"> B5 </option>
    <option value="six_pma"> B6 </option>
    <option value="seven_pma"> B7 </option>
  </select>