Loading dynamic dropdown values on button click-CodePudding

I am currently working with dynamic dropdowns and started using this

Desired Result after button click:

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