Home > Net >  Loading dynamic dropdown values on button click
Loading dynamic dropdown values on button click

Time:03-04

I am currently working with dynamic dropdowns and started using this enter image description here

Desired Result after button click:

enter image description here

CodePudding user response:

Looks like each dropdown data population depends on the previous dropdown selected value.

I see you are setting the value through JS as such:

document.getElementById('screen').value = e.target.dataset.screen;

Which is correct. However the dropdown jquery library is not detecting a change and therefore it doesnt load the values for the following dropdowns. To force this, call jQuery change() after selecting an option:

const updateBtn = document.querySelector('.updateButton'); 
updateBtn.addEventListener('click', (e) => {
  $("#screen").val(e.target.dataset.screen).change();
  $("#resolution").val(e.target.dataset.resolution).change();
  $("#storage").val(e.target.dataset.storage).change();
});

Here is a working JsFiddle reflecting the above

CodePudding user response:

I'm not that familiar on how to do this in PHP, however you are looking for something that resembles "OnSelectedIndexChanged" function. On a quick search the Internet came back with selectedIndex and selectedProperies for PHP. I added the link below.

SelectedIndex Example

  • Related