• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 139
  • Last Modified:

selecting a category and selecting subcategories

Dear Experts,

I want my user to select category, after they select a category, I need them to select a subcategory after that I want them to select another subcategory.

What is the best way of doing this?
Please see the attached picture of the website which does that.

I use php and myql database.
0
Braveheartli
Asked:
Braveheartli
  • 2
  • 2
  • 2
2 Solutions
 
Ray PaseurCommented:
the attached picture
?

The commonly used keywords for something like this are dependent dropdown jquery ajax and a Google search turns up tens of thousands of results (It's a pretty well-understood design pattern).  Among those, this looked like one of the best.  Please read it over and try the code examples, then post back if you still have questions.
http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html
0
 
BraveheartliMarketingAuthor Commented:
Here is the attached picture
Capture.JPG
0
 
Ray PaseurCommented:
Thanks for the picture.  I think the 9Lessons link will be helpful!
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Julian HansenCommented:
This sample code demonstrates the concept
HTML
  <form class="form form-horizontal">
    Get from server <input type="checkbox" name="server" id="server" /><br/>
    <div class="form-group">
      <label for="company" class="col-sm-2 control-label">Company</label>
      <div class="col-sm-10">
        <select id="company" name="company" class="form-control linked-dropdown" data-linked="make">
          <option value="">-- Select Product --</option>
          <option value="1">Product1</option>
          <option value="2">Product2</option>
          <option value="3">Product3</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="make" class="col-sm-2 control-label">Make</label>
      <div class="col-sm-10">
        <select id="make" name="make" class="form-control linked-dropdown" data-linked="model"></select>
      </div>
    </div>
    <div class="form-group">
      <label for="model" class="col-sm-2 control-label">Model</label>
      <div class="col-sm-10">
        <select id="model" name="model" class="form-control"></select>
      </div>
    </div>
  </form>

Open in new window


jQuery
<script>
var options = {
  make: {
    1:{
      1: 'Prod1Make1',
      2: 'Prod1Make2',
      3: 'Prod1Make3'
    },
    2:{
      4: 'Prod2Make1',
      5: 'Prod2Make2',
      6: 'Prod2Make3'
    },
    3 :{
      7: 'Prod3Make1',
      8: 'Prod3Make2',
      9: 'Prod3Make3'
    }
  },
  model: {
    1: {
      1: 'Prod1Make1Model1',
      2: 'Prod1Make1Model2',
      3: 'Prod1Make1Model3'
    },
    2: {
      4: 'Prod1Make2Model1',
      5: 'Prod1Make2Model2',
      6: 'Prod1Make2Model3'
    },
    3: {
      7: 'Prod1Make3Model1',
      8: 'Prod1Make3Model2',
      9: 'Prod1Make3Model3'
    },
    4: {
      10: 'Prod2Make1Model1',
      11: 'Prod2Make1Model2',
      12: 'Prod2Make1Model3'
    },
    5: {
      13: 'Prod2Make2Model1',
      14: 'Prod2Make2Model2',
      15: 'Prod2Make2Model3'
    },
    6: {
      16: 'Prod2Make3Model1',
      17: 'Prod2Make3Model2',
      18: 'Prod2Make3Model3'
    },
    7: {
      19: 'Prod3Make1Model1',
      20: 'Prod3Make1Model2',
      21: 'Prod3Make1Model3'
    },
    8: {
      22: 'Prod3Make2Model1',
      23: 'Prod3Make2Model2',
      24: 'Prod3Make2Model3'
    },
    9: {
      25: 'Prod3Make3Model1',
      26: 'Prod3Make3Model2',
      27: 'Prod3Make3Model3'
    }
  }
};
 
$(function() {
  $('.linked-dropdown').change(function() {
    // GET THE id OF THE NEXT DROPDOWN
    // IN THE CHAIN
    var linked = $(this).data('linked');
    
    // CREATE THE SELECTOR
    var target = '#' + linked;
  
    // EMPTY THE TARGET
    $(target).empty();
    
    // EMPTY ALL THE CHILDREN
    var child = $(target).data('linked');
    while (child) {
      $('#' + child).empty();
      child = $('#' + child).data('linked');
    }
    
    // ARE WE GETTING THIS FROM THE SERVER
    // OR USING LOCAL ARRAY
    if ($('#server').is(':checked')) {
    
      // SERVER SEND AJAX CALL AND 
      // POPULATE WITH RESPONSE
      $.ajax({
        url: 't1496.php',
        data: {
          linked: linked,
          value: $(this).val()
        },
        type: "POST",
        dataType: "html"
      }).then(function(resp) {
      
        // SERVER BUILDS HTML RETURN
        // WE JUST INSERT IT
        $(target).html(resp);
      });
    }
    else {
      // GET THE SELECTED VALUE
      var val = $(this).val();
      // AND USE THIS TO GET THE CORRESPONDING
      // ARRAY OF OPTIONS
      opts = options[linked][val];
    
      // INSERT THE INSTRUCTION OPTION
      $(target).append($('<option/>').val('').html('-- Select --'));
      
      // LOOP THROUGH THE TARGET OPTIONS AND ADD THEM
      $.each(opts, function(v,o) {
        $(target).append($('<option/>').html(o).val(v))
      });
    }
  });
});
</script>

Open in new window


PHP
<?php
 
$options = array (
  'make' => array (
    1 => array (
      1 => 'Server-Prod1Make1',
      2 => 'Server-Prod1Make2',
      3 => 'Server-Prod1Make3'
    ),
    2=> array (
      4=> 'Server-Prod2Make1',
      5=> 'Server-Prod2Make2',
      6=> 'Server-Prod2Make3'
    ),
    3 => array (
      7=> 'Server-Prod3Make1',
      8=> 'Server-Prod3Make2',
      9=> 'Server-Prod3Make3'
    )
  ),
  'model' => array (
    1=> array (
      1=> 'Server-Prod1Make1Model1',
      2=> 'Server-Prod1Make1Model2',
      3=> 'Server-Prod1Make1Model3'
    ),
    2=> array (
      4=> 'Server-Prod1Make2Model1',
      5=> 'Server-Prod1Make2Model2',
      6=> 'Server-Prod1Make2Model3'
    ),
    3=> array (
      7=> 'Server-Prod1Make3Model1',
      8=> 'Server-Prod1Make3Model2',
      9=> 'Server-Prod1Make3Model3'
    ),
    4=> array (
      10=> 'Server-Prod2Make1Model1',
      11=> 'Server-Prod2Make1Model2',
      12=> 'Server-Prod2Make1Model3'
    ),
    5=> array (
      13=> 'Server-Prod2Make2Model1',
      14=> 'Server-Prod2Make2Model2',
      15=> 'Server-Prod2Make2Model3'
    ),
    6=> array (
      16=> 'Server-Prod2Make3Model1',
      17=> 'Server-Prod2Make3Model2',
      18=> 'Server-Prod2Make3Model3'
    ),
    7=> array (
      19=> 'Server-Prod3Make1Model1',
      20=> 'Server-Prod3Make1Model2',
      21=> 'Server-Prod3Make1Model3'
    ),
    8=> array (
      22=> 'Server-Prod3Make2Model1',
      23=> 'Server-Prod3Make2Model2',
      24=> 'Server-Prod3Make2Model3'
    ),
    9=> array (
      25=> 'Server-Prod3Make3Model1',
      26=> 'Server-Prod3Make3Model2',
      27=> 'Server-Prod3Make3Model3'
    )
  )
);
 
$val = isset($_POST['value']) ? intval($_POST['value']) : false;
$linked = isset($_POST['linked']) ? $_POST['linked'] : false;
if ($val && $linked) {
  $opt = $options[$linked][$val];
  $return = <<< OPTION
      <option value="">-- Select --</option>
 
OPTION;
  foreach($opt as $v => $o) {
    $return .= <<< OPTION
      <option value="{$v}">{$o}</option>
OPTION;
  }
  
  echo $return;
}

Open in new window


Working sample here
1
 
BraveheartliMarketingAuthor Commented:
thank you
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now