Need to make two dependent selects with dynamic content

by deweius   Last Updated September 10, 2018 15:08 PM

I have two select dropdowns, one of them for device type(smartphones,cameras,PC etc), second are models for every device. The first select(Device) will be disabled for selecting, so if nothing is chosen in model option the device option would be same as url "devicename".(http://sitename/phones) But still model select is dependent on first select, i did that with jQuery. How could i pass option values to Wordpress?

var $select1 = $('#device'),
   $select2 = $('#model'),
   $options = $select2.find('option');

$select1.on( 'change', function() {
  $select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );

Plus, when model option is changed, it redirects on page with that option devicename(like http://sitename/samsung_x9) and selected option in dropdown would be Samsung Galaxy X9.

For every model there are bunch of services like repairing display etc - they are dynamic and could be added in admin panel inifinitely.

When one of that service is pressed, it redirects to the specific page(right img) with dynamic model and service in title and dynamic service cost and information.

enter image description here

Now i really have no clue how could i arrange that - it could be achieved by making templates for every device select, so user could make inifinitely Models for that device, but how can i make pages that are nested in other page with not nested url? Plus how could i redirect on certain page by changing right select option? And Service1,service2,service3 - should i make them posts(then how could i sort them model would be pages), and what would be right image page?(single.php?)

I really am stucked into this a long time - its even not the code, but just algorithm i dont understand. So guys, if you could help me,even without code, that would be great.

Related Questions

Query to list all galleries under a parent post?

Updated September 20, 2017 21:08 PM