Selectors

Selectors

All selectors on the site are preceded by brief header which ends with a colon, such as “Explore data:” or “Browse this section:”. The first item in the selector list should be a specific call to action, such as “Choose location”. Green year selectors are an exception to this, because they default to the most recent year.

Note: once a user clicks to view a selector’s contents, its appearance changes to the default style set by the browser.

<!-- <div class=""></div> -->

<div class="container-left-4 container-margin">
    <div>
        <label>Selector call to action:</label>
        <select>
      <option>Choose one</option>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
    </div>
</div>

<div class="container-margin">
    <section class="year-switcher-section">
        <div class="pre-sticky"></div>
        <h3 class="h3-bar sticky sticky-header-wrapper flex-row stuck">
            <span class="flex-row-flex">Production on federal land nationwide</span>
            <select class="chart-selector flex-row-icon">
     <option value="2016" selected="">2016</option>
     <option value="2015">2015</option>
     <option value="2014">2014</option>
     <option value="2013">2013</option>
     <option value="2012">2012</option>
     <option value="2011">2011</option>
     <option value="2010">2010</option>
     <option value="2009">2009</option>
     <option value="2008">2008</option>
     <option value="2007">2007</option>
    </select>
</div>

<div class="container-left-4 container-margin">
    <label>State selector call to action:</label>
    <select id="location-selector" class="select-dark-gray" onchange="window.location = '' + this.value">

      {% if include.default %}
        <option value="" disabled selected></option>
      {% endif %}
      {% if include.nationwide %}
        <option value=""></option>
      {% endif %}
      <optgroup label="States">
        {% for state in site.states %}
        <option value=""></option>
        {% endfor %}
      </optgroup>
      <optgroup label="Offshore Regions">
        {% for region in site.offshore_regions %}
        <option value=""></option>
        {% endfor %}
      </optgroup>
    </select>
</div>
</div>
<!-- <div class="{{ className }}">{{ text }}</div> -->

<div class="container-left-4 container-margin">
  <div>
    <label>Selector call to action:</label>
    <select>
      <option>Choose one</option>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>

  <div class="container-margin">
    <section class="year-switcher-section">
    <div class="pre-sticky"></div><h3 class="h3-bar sticky sticky-header-wrapper flex-row stuck">
     <span class="flex-row-flex">Production on federal land nationwide</span>
    <select class="chart-selector flex-row-icon">
     <option value="2016" selected="">2016</option>
     <option value="2015">2015</option>
     <option value="2014">2014</option>
     <option value="2013">2013</option>
     <option value="2012">2012</option>
     <option value="2011">2011</option>
     <option value="2010">2010</option>
     <option value="2009">2009</option>
     <option value="2008">2008</option>
     <option value="2007">2007</option>
    </select>
  </div>

  <div class="container-left-4 container-margin">
    <label>State selector call to action:</label>
    <select
      id="location-selector"
      class="select-dark-gray"
      onchange="window.location = '{{ site.baseurl }}' + this.value">

      {% if include.default %}
        <option value="" disabled selected>{{ include.default }}</option>
      {% endif %}
      {% if include.nationwide %}
        <option value="{{ include.nationwide_url }}">{{ include.nationwide_title }}</option>
      {% endif %}
      <optgroup label="States">
        {% for state in site.states %}
        <option value="{{ state.url }}">{{ state.title }}</option>
        {% endfor %}
      </optgroup>
      <optgroup label="Offshore Regions">
        {% for region in site.offshore_regions %}
        <option value="{{ region.url }}">{{ region.title }}</option>
        {% endfor %}
      </optgroup>
    </select>
  </div>
</div>
/* No context defined for this component. */