3

I have a dropdown list with id='apha' with three options and their values are comma separated.

<select class="browser-default" id="alpha">
    <option value="a,b,c">One</option>
    <option value="d">Two</option>
    <option value="e,f">Three</option>
</select>

Another dropdown beta with values. Based on which option is selected in alpha those values should be there in second dropdown beta.

<select class="browser-default" id="beta">
    <option value="a">First</option>
    <option value="b">Second</option>
    <option value="c">Third</option>
    <option value="d">Fourth</option>
    <option value="e">Fifth</option>
    <option value="f">Sixth</option>
</select>

So if One is selected from alpha dropdown. Only values of aplha - a,b,c should be present in beta dropdown - First Second Third

What i have tried: Without comma separated in values

$('#alpha').on('change', function () {
  $('#alpha').html('');
  if ($('#alpha').val() == "One") {
    $('#alpha').append('<option value="a">First</option>');
    $('#alpha').append('<option value="b">Second</option>');
    $('#alpha').append('<option value="c">Third</option>');
  } 
});
  • There are so many duplicates here on SO, did those not help? https://stackoverflow.com/questions/19728666/drop-down-box-dependent-on-the-option-selected-in-another-drop-down-box, https://stackoverflow.com/questions/30232146/dynamically-populating-drop-down-list-from-selection-of-another-drop-down-value, https://stackoverflow.com/questions/5686735/populate-one-dropdown-based-on-selection-in-another, https://stackoverflow.com/questions/41906235/populate-one-dropdown-list-based-on-another-dropdown-list ... – Don't Panic Jan 08 '21 at 10:11

2 Answers2

1

Vanilla JS

const beta = document.getElementById('beta');
const betaOpts = [...beta.children];

document.getElementById('alpha').addEventListener(
  'change',
  (e) => {
    beta.innerHTML = betaOpts.filter(
      o => e.target.value.includes(o.value)
    ).map(o => o.outerHTML).join('')
  })
<label>Alpha</label>
<select class="browser-default" id="alpha">
  <option value="a,b,c">One</option>
  <option value="d">Two</option>
  <option value="e,f">Three</option>
</select>

<label>Beta</label>
<select class="browser-default" id="beta">
  <option value="a">First</option>
  <option value="b">Second</option>
  <option value="c">Third</option>
  <option value="d">Fourth</option>
  <option value="e">Fifth</option>
  <option value="f">Sixth</option>
</select>
mccallofthewild
  • 521
  • 2
  • 6
0

You can use split(',') to split values then using for-loop you can get values from split array and finally use $("#beta option[value=" + vals + "]").show() to show options where values matches.

Demo Code:

$("#alpha").on("change", function() {
  var values = $(this).val().split(',') //split value which is selected
  $("#beta option").hide() //hide all options from slect box
  //loop through values
  for (var i = 0; i < values.length; i++) {
    var vals = values[i]
    $("#beta option[value=" + vals + "]").show()//show that option

  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="browser-default" id="alpha">
  <option value="a,b,c">One</option>
  <option value="d">Two</option>
  <option value="e,f">Three</option>
</select>

<select class="browser-default" id="beta">
  <option selected="selected" value="">--select one-- </option>
  <option value="a">First</option>
  <option value="b">Second</option>
  <option value="c">Third</option>
  <option value="d">Fourth</option>
  <option value="e">Fifth</option>
  <option value="f">Sixth</option>
</select>
Swati
  • 28,069
  • 4
  • 21
  • 41
  • If there is space in the value, result is not showing in dropdown, Example: Instead of "a", If I put "apple a" it's not working, Can you support? – Moses Aug 08 '22 at 14:33
  • 1
    Yes , just change `$("#beta option[value=" + vals + "]").show()` to `$("#beta option[value='" + vals + "']").show()` @Moses – Swati Aug 08 '22 at 17:14