Using hook_form_FORM_ID_alter to add CSS class to Simple Hierarchical Select

Question

I'm trying to use hook_form_FORM_ID_alter to add a CSS class to one of the select element.

I'm trying to add a CSS class "form-control", to the <select id="edit-shs-term-node-tid-depth-select-1">'s class.

I have added it and even performed drush cc all, but still nothing was added to the class of select.

HTML

 <form action="/properties" method="get" id=
  "views-exposed-form-view-property-page-master" accept-charset="UTF-8" class=
  "jquery-once-1-processed">
    <div>
      <div class="views-exposed-form">
        <div class="views-exposed-widgets clearfix">
          <div id="edit-title-wrapper" class=
          "views-exposed-widget views-widget-filter-title">
            <label for="edit-title">Search</label>

            <div class="views-widget">
              <div class="form-type-textfield form-item-title form-item form-group">
                <input class="form-control form-text" type="text" id="edit-title" name=
                "title" value="" size="30" maxlength="128" />
              </div>
            </div>
          </div>

          <div id="edit-field-developer2-tid-wrapper" class=
          "views-exposed-widget views-widget-filter-field_developer2_tid">
            <label for="edit-field-developer2-tid">Developer</label>

            <div class="views-widget">
              <div class=
              "form-type-select form-item-field-developer2-tid form-item form-group">
                <select class="form-control form-select" id="edit-field-developer2-tid"
                name="field_developer2_tid">
                  <option value="All" selected="selected">
                    - Any -
                  </option>
                </select>
              </div>
            </div>
          </div>

          <div id="edit-shs-term-node-tid-depth-wrapper" class=
          "views-exposed-widget views-widget-filter-shs_term_node_tid_depth">
            <label for="edit-shs-term-node-tid-depth">Location</label>

            <div class="views-widget">
              <div class=
              "form-type-textfield form-item-shs-term-node-tid-depth form-item form-group shs-wrapper-processed">
              <input class=
              "element-invisible shs-enabled form-control form-text shs-processed"
                type="text" id="edit-shs-term-node-tid-depth" name=
                "shs_term_node_tid_depth" value="All" size="60" maxlength="128" />
                <select id="edit-shs-term-node-tid-depth-select-1" class=
                "shs-select form-select shs-select-level-1" style=
                "display: inline-block;">
                  <option value="0">
                    - None -
                  </option>
                </select>
              </div>
            </div>
          </div>

          <div id="edit-field-property-type-tid-wrapper" class=
          "views-exposed-widget views-widget-filter-field_property_type_tid">
            <label for="edit-field-property-type-tid">Property Type</label>

            <div class="views-widget">
              <div class=
              "form-type-select form-item-field-property-type-tid form-item form-group">
                <select class="form-control form-select" id=
                "edit-field-property-type-tid" name="field_property_type_tid">
                  <option value="All" selected="selected">
                    - Any -
                  </option>
                </select>
              </div>
            </div>
          </div>

          <div class="views-exposed-widget views-submit-button">
            <button class="btn btn-info form-submit" id="edit-submit-view-property" name=
            "" value="Apply" type="submit">Apply</button>
          </div>
        </div>
      </div>
    </div>
  </form>

template.php

/*
 * implements hook_form_FORM_ID_alter
 *
 */
function directbootstrap_form_views_exposed_form_view_property_page_master_alter(&$form, &$form_state, $form_id) {


    $form['shs_term_node_tid_depth']['#attributes'][] = array('class' => array('form-control'));
}

EDIT

I have updated my question,

What I'm trying to accomplish is insert a class 'form-control' on to the hierarchical select. But after inserting dpm($form); inside the function. All I can find is the array for the element shs_term_node_tid_depth but not the <select> itself.

here is my template.php

/**
 * implementation of hook_form_FORM_ID_alter()
 */
function directbootstrap_form_views_exposed_form_alter(&$form, &$form_state, $form_id)
{
 if ($form['#id'] == 'views-exposed-form-view-property-page-master')) {
    $form['shs_term_node_tid_depth']['#attributes']['class'][] = 'form-control';
  }
}

Answer 1

You need:

$form['shs_term_node_tid_depth']['#attributes'] = array('class' => array('form-control'));

or more succinct version:

$form['shs_term_node_tid_depth']['#attributes']['class'][] = 'form-control';

Answer 2

Views exposed forms are...fun. For example, the form ID you get will always be views_exposed_form, regardless of the ID you see in HTML or anywhere else. So currently your form alter function isn't named quite right.

You need to alter the form by its correct ID on the PHP side, and grab the context from something else in the form, maybe the html ID itself.

So, a rudimentary version of what you're looking for would be

function MYMODULE_form_views_exposed_form_alter(&$form, &$form_state, $form_id) {
  if ($form['#id'] == 'views-exposed-form-view-property-page-master')) {
    $form['shs_term_node_tid_depth']['#attributes']['class'][] = 'form-control';
  }
}

Remember to clear the caches after you've changed the function name.