0

I want a form to have multiple drop down selects that change based on the previous selection. This is how I want it to work.

<select id="format">
<option selected="selected" value="NULL">-- Select a product Format --</option>
<option value="PS3">PS3</option>
<option value="Xbox 360">Xbox 360</option>
<option value="Wii U">Wii U</option>
</select>

So if you select PS3 you are then faced with more options for PS3 product type

<select id="ps3-product-type">
<option selected="selected" value="NULL">-- Select a product PS3 product type --</option>
<option value="chargers">chargers</option>
<option value="controllers">controllers</option>
<option value="headsets">headsets</option>
</select>

So then you select headsets for example and you get another set of final options of products 

<select id="ps3-headsets">
<option selected="selected" value="NULL">-- Select a PS3 headset --</option>
<option value="product-1">product 1</option>
<option value="product 2">product 2</option>
<option value="product 3">product 3</option>
</select>

How can I do this with jquery or PHP? Please bare in mind that I will also have selects for Xbox 360 and Wii U too.

UPDATE PROGRESS: http://jsfiddle.net/maximus83/r7MN9/639/

Here is my HTML, I have got the first set of arrays working for selecting product type, But I cant get the 3rd box working, I need 3rd box to say the product, where do I go from here. 

    <select id="cat">
    <option val="PS3">PS3</option>
    <option val="Xbox360">Xbox360</option>
    <option val="WiiU">WiiU</option>
    <option val="Multiformat">Multiformat</option>
</select>

<select id="item">

</select>

<select id="product">

</select>

Here is my script

    PS3=new Array('Headsets(PS3)','Controllers(PS3)','Chargers(PS3)','Cables(PS3)');
Xbox360=new Array('Headsets(360)','Chargers(360)');
WiiU=new Array('Controllers(WiiU)','Headsets(WiiU)');
Multiformat=new Array('Headsets(Multi)','Chairs(Multi)','Cables(Multi)');

populateSelect();

$(function() {

      $('#cat').change(function(){
        populateSelect();
    });

});


function populateSelect(){
    cat=$('#cat').val();
    $('#item').html('');

       eval(cat).forEach(function(t) { 
            $('#item').append('<option val="#item">'+t+'</option>');


        });
    }
user1236630
  • 33
  • 9
  • do you have all the select boxes available on your page or you are going to fetch them runtime? – Bhushan Kawadkar Sep 12 '14 at 12:35
  • 1
    Use ajax (you can do this with jQuery). You can do an asynchronous request via Javascript to a PHP script, the answer can be used to populate the other dropdown boxes. – Jeroen de Jong Sep 12 '14 at 12:36
  • see [this](http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28398943.html) if useful to you – Bhushan Kawadkar Sep 12 '14 at 12:38
  • I don't mind if the boxes are there or appear as selected, Bhushan. Any advice much appreciated – user1236630 Sep 12 '14 at 12:39
  • from http://www.w3schools.com/tags/att_global_id.asp: The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). therefore, your selects shouldn't have all the same id's - use class instead, if they still should have kind of the same name... – errand Sep 12 '14 at 12:40
  • http://www.infotuts.com/cascaded-dropdown-jquery-ajax-php/ may be useful... – coDe murDerer Sep 12 '14 at 12:41
  • http://jsfiddle.net/maximus83/r7MN9/639/ please see progress, can't get the 3rd selection to work , how do i define the value , so I can get this working? – user1236630 Sep 12 '14 at 16:26

1 Answers1

0

This should do the trick for you. It's a previously answered thread on the exact same topic - how to populate a drop down based on the value in another. It takes advantage jQuery (And I've used it before myself as reference).

Community
  • 1
  • 1
iamgory
  • 862
  • 1
  • 6
  • 10