$(document).ready(
  function() {
    $('.l2').each(
      function() {
        $(this).text('--' + $(this).text());
      }
    );

    $('.l3').each(
      function() {
        $(this).text('----' + $(this).text());
      }
    );
  }
);

#hierarchy,
#hierarchy>option {
  text-align: justify;
  text-shadow: 1px 1px grey; /*optional!*/
  word-spacing: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="hierarchy" name="hierarchy">
  <option class="l1" selected>Level 1</option>
  <option class="l2">First L2 Indent</option>
  <option class="l3">First L3 Indent</option>
  <option class="l2">Second L2 Indent</option>
  <option class="l3">Second L3 Indent</option>
  <option class="l3">Third L3 Indent</option>
</select>