CODEWITHSUNDEEP
javascriptphpjquery
Jerome Papalie
Jerome Papalie

Reputation: 21

How to show a secondary dropdown using JS

I've got this site I'm working on for my office, and the specs for a page require me to have a dropdown appear after a selection is made on a primary dropdown list.

Basically, when a person selects "user" on dropdown 1, dropdown 2 should be shown with a list of users.

I've got the actual drop downs created, I am having trouble with the part where the second one is supposed to appear after a selection is made on the first.

<div>
@include('orders.dropdown', ['field_name' => 'select_user' ,'default_value'=> null ,'drop_down_list' =>$groups, 'form_index' => 0, 'display_name' =>  trans('notifications.select_user') ])
</div>

<div class= "hidden" id= "single_user_hidden_dropdown">
@include('orders.dropdown', ['field_name' => 'select_single_user' , 'default_value'=> null,'drop_down_list' =>$customer_drop_down, 'form_index' => 0, 'display_name' =>  trans('notifications.select_single_user') ])
</div>

The above is a sample of the code I used on said page. Can anyone help me?

Upvotes: 0

Views: 51

Answers (2)

Win
Win

Reputation: 5594

You could load in your collection via a laravel blade helpers using {!! !!}. Once you do that you can follow the below code to achieve what you're looking for. Feel free to ask further questions if you need help.

var HarryPotterCollection = ['Harry Potter and the Philosopher\'s Stone','Harry Potter and the Chamber of Secrets','Harry Potter and the Prisoner of Azkaban','Harry Potter and the Goblet of Fire',
'Harry Potter and the Order of the Phoenix','Harry Potter and the Half-Blood Prince','Harry Potter and the Deathly Hallows'];

var StarWarsCollection = ['A New Hope','The Empire Strikes Back','Return of the Jedi','The Phantom Menace','Attack of the Clones','Revenge of the Sith','The Force Awakens','The Last Jedi',
'The Light Calls'];

var select = document.getElementById('select');
var secondSelect = document.getElementById('second-select');

select.addEventListener('change', function() {

  // show second select and empty results
  secondSelect.style.display = 'block';
  secondSelect.innerHTML = '';
  
  // append each film into the select from collection
  window[this.value].forEach(function(film) {
    secondSelect.innerHTML += '<option>' + film + '</option>';
  });
  
});
<select id="select">
  <option selected disabled>Please select a film</option>
  <option value="HarryPotterCollection">Harry Potter</option>
  <option value="StarWarsCollection">Star Wars</option>
</select>

<select id="second-select" style="display: none"></select>

Upvotes: 0

Nimish Gupta
Nimish Gupta

Reputation: 3175

Try this javascript snippet

$('#drop_down_1_id').on('change', function() {
  if($(this).val() == 'users') {
    $('#single_user_hidden_dropdown').removeClass('hidden')
  } else {
    $('#single_user_hidden_dropdown').addClass('hidden')
  }

})

Don't forget to replace drop_down_1_id with id of your first select box and ($(this).val() == 'users') to your logic of showing or hiding other select box

$(this).val() will give you value of currently selected option.

Hope this helps. Please let me know if you still faces any issues

Upvotes: 1

Related Questions