how to display optgroup label from database in php select list

Question

**Table ** - ServiceAreaCategory

fields - id,name

Table - Skill

fields - id,skill_name,service_area_category_id

on selection of ServiceAreaCategory id i am getting skill_name from skill table.

Now,i want to display name of ServiceAreaCategory table in optgroup of state listbox.

I have a dependent dropdown list box like country and state...on selection of countries i am fetching states of selected countries via ajax.

now i want to show countries lable in optgroup of states listbox.

for ex - when i select india and america from country listbox..

The state listbox shows result like below..

india
--abc
--def
America
--abc
--def

can anybody help me to fetch and display optgroup label of my selected state in select box.

below is my code..

// for displaying countries

<?php
                                echo $this->Form->input('UserLogDetail.service_area_category_id', array(
                                            'id' => 'shipping_type',
                                            'required' => false, 
                                            'multiple' =>'multiple',
                                            'type' => 'select',                                           
                                            'class' => 'form-control',
                                            'label' => false,
                                            'options' => $serviceCategory
                                ));
                                ?>

                            **// for displaying states of selected countries**


 <?php
                            echo $this->Form->input('UserLogDetail.skills', array(
                                'class' => 'selectpicker',
                                'required' => false,
                                'multiple' =>'multiple',
                                'id' => 'skills',
                                'label' => false,
                                'options' => '$skills'                                           
                            ));
                            ?>  

**//contoller functions**



 public function getServiceArea(){     
        $this->loadModel('ServiceAreaCategory');        
        $serviceCategory = $this->ServiceAreaCategory->find('list',array('conditions'=>array('is_active'=>1),'fields'=>array('ServiceAreaCategory.id','ServiceAreaCategory.name'),'order'=>'name ASC'));
        $this->set('serviceCategory',$serviceCategory);     
    }

    public function loadSkills() {      
        $this->loadModel('Skill');
        $skills = array();
        if (isset($this->request['data']['id'])) {
        $ids = explode(",",$this->request['data']['id']);
        if(count($ids)>1){
            $skills = $this->Skill->find('list', array('fields' => array('Skill.id','Skill.skill_name'),'conditions' => array(
            'Skill.service_area_category_id IN' => $ids)));
            } else {
            $skills = $this->Skill->find('list', array('fields' => array('Skill.id','Skill.skill_name'),'conditions' => array(
        'Skill.service_area_category_id' => $ids)));
            }          
        }
        echo json_encode($skills);
        exit();
    } 



**Ajax function**


<script type="text/javascript">
    $(document).ready(function() {        
        $("#shipping_type").on('change', function() {
            var id = $(this).val();           
            if (id) {
                var dataString = 'id=' + id;
                $.ajax({
                    type: "POST",
                    url: '<?php echo Router::url(array("controller" => "Profiles", "action" => "loadSkills"),true); ?>',
                    data: dataString,
                    dataType: 'JSON',
                    cache: false,                  
                   success: function(html) {                       
                        $("#skills").html("");
                        $.each(html, function(key, value) {
                            $('<option>').val('').text('select');
                            $('<option>').val(key).text(value).appendTo($("#skills"));
                        });
                        $('#skills').selectpicker('refresh');
                    }
                });
            }
        });      
});
</script>

Answer 1

1. First find the distinct record from table ServiceAreaCategory and store the names in the array

   $ServiceAreaCategory = array(
       'serviceName1',
       'serviceName2',
       'serviceName3',
       'serviceName4',
       'serviceName...N',
   );
   

2. Now Prepare a join record b/W table ServiceAreaCategory and Skill

3. Now you have get an data-set object from the step 2 and stored in variable $data

4. Loop thorough $data and add the option appropriate to Service name in array $ServiceAreaCategory

   foreach($data as $row){
        if(in_array($row['name'], $ServiceAreaCategory)){
             $ServiceAreaCategory[$row['name']][] = array($row['id'] => $row['skill_name']);
        }
   }
   

HTML :

$html = "<select>";
foreach($ServiceAreaCategory as $key => $value){
    if(!empty($value)){
        $html .="<optgroup label='".$key."'>"; 
        foreach($value as $k => $v){
            $html .="<option value='".$k."'>".$v."</option>";
        }
        $html .="</optgroup>"; 
    } 
}

$html .= "</select>";

echo $html;