Create relation between two select list for Hierarchical select option

Question

In a content type, I want to have two select fields eg:

Select list 1 contains the Mobile phone brands names

Nokia
Samsung
HTC
Apple

Select list 2 contains the phone type like:

Lumia 520
Lumia 620
Galaxy S3
Galaxy S4
Hero
One
iPhone 4
iPhone 5

While adding new content, I want to make a Hierarchical select in this case, When a user selects Nokia from Select 1, then only Nokia phones are available for selection in Select 2 like:

Lumia 520
Lumia 620

But if nothing is selected in Select 1, then Select 2 doesn't show any options but still visible.

So far I tried Hierarchical select Module, but works only when I put the taxonomy term in hierarchical form instead of lists like:

Nokia
    Lumia 520
    Lumia 620

Samsung
    Galaxy S3
    Galaxy S4

HTC
    Hero
    One

Apple
    iPhone 4
    iPhone 5

and it only stores one value in the database (the phone Name). I want to be able to store both Brand and Phone name in Database as fields, so, I could display both fields using Views and also have exposed filter to filter through this.

Any suggestions how should I approach ?

Answer 1

Is the Conditional Fields module of any help to you? Here is a quote about it (from the module's project page):

Define dependencies between fields based on their states and values.

Conditional Fields for Drupal 7 is an user interface to the new States API, plus the ability to modify fields appearance and behavior on certain conditions when viewing content.

Answer 2

Hope this will help you

function mymodule_form_alter(&$form, &$form_state, $form_id){

//put your form id
if ($form_id == 'two_state_node_form')  {

    $options_first = dynamic_add_options();

   $value_dropdown_first = isset($form_state['triggering_element']['#value']) ? $form_state['triggering_element']['#value'] : key($options_first);

    $form['#validated'] = TRUE;
    //put your first field name
    $form['field_select_list_1']['und']['#options'] = $options_first;
    $form['field_select_list_1']['und']['#default_value'] = $value_dropdown_first;
    $form['field_select_list_1']['und']['#ajax'] = array(
    'event' => 'change',
    'callback' => 'dynamic_ajax_callback',
    'wrapper' => 'dropdown_second_replace',
 );
    //put your secon field name
  $form['field_select_list_2']['und']['#prefix'] = '<div id="dropdown_second_replace">';
  $form['field_select_list_2']['und']['#suffix'] = '</div>';
  $form['field_select_list_2']['und']['#options'] = dynamic_second_dropdown_options($value_dropdown_first);
  $form['field_select_list_2']['und']['#default_value'] = isset($form_state['values']['field_select_list_2']) ? $form_state['values']['field_select_list_2'] : '';
 }
}



function dynamic_ajax_callback($form, $form_state) {

    return $form['field_select_list_2'];
}


function dynamic_add_options() {
  return array(
        'None' => 'None',
        'Nokia' => 'Nokia',
        'Samsung' => 'Samsung',
        'HTC' => 'HTC',
        'Apple' => 'Apple'
    );
   return $options;      
}

function dynamic_second_dropdown_options($key = '') {
    $options = array(
        'None' => array(
            'None' => 'none',
             ),
        'Nokia' => array(
            'Lumia 520' => 'Lumia 520',
            'Lumia 620' => 'Lumia 620'
        ),
        'Samsung' => array(
            'Galaxy S3' => 'Galaxy S3',
            'Galaxy S4' => 'Galaxy S4'
        ),
        'HTC' => array(
            'Hero' => 'Hero',//trancate the code
            'One' => 'One'
        ),
        'Apple' => array(
            'iPhone 4' => 'iPhone 4',
            'iPhone 5' => 'iPhone 5'
        ),
    );
    if (isset($options[$key])) {
        return $options[$key];
    }
    else {
        return array();
    }
}

this is demo for you demo

Answer 3

I would use a hierarchical taxonomy and use hierarchical_select. It only stores one value in the database, but you can still create a view that filters on brand by using a parent term filter.