title: How can I hide my drop-down menu option(s)?
body: <p>I have a dropdown-menu, <strong>Class View</strong> is my default option.</p>
  <p><img src="https://i.stack.imgur.com/n5T0d.png" alt="enter image description here" /></p>
  <p>When I clicked on the arrow, I have this</p>
  <p><img src="https://i.stack.imgur.com/sRuxt.png" alt="enter image description here" /></p>
  <hr />
  <p>I tried to hide <strong>Class View</strong> option, and set <strong>Geary, Mia</strong> as my default option. I couldn't get it to hide.</p>
  <hr />
  <h1>HTML</h1>
  <pre><code>&lt;div class=&quot;row cb-btns-row &quot; style=&quot;background-color:white;&quot;&gt;
      &lt;div class=&quot;col-xs-3 col-sm-3 col-md-3 col-lg-3&quot;&gt;
          &lt;div id=&quot;dd&quot; class=&quot;wrapper-dropdown-1&quot; tabindex=&quot;1&quot;&gt;   &lt;span&gt;Class View &lt;/span&gt;
  
              &lt;ul class=&quot;dropdown&quot;&gt;
                  &lt;li&gt;&lt;a id=&quot;class-view&quot; href=&quot;#&quot;&gt;Class View&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a id=&quot;student#1&quot; class=&quot;student&quot; href=&quot;#&quot;&gt;Geary, Mia&lt;/a&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <hr />
  <h1>JS</h1>
  <pre><code>// dropDown Menu 
  function dropDown(el) {
  
      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown &gt; li');
      this.val = '';
      this.index = -1;
      this.initEvents();
  }
  
  
  dropDown.prototype = {
      initEvents: function () {
          var obj = this;
  
          obj.dd.on('click', function (event) {
              $(this).toggleClass('active');
              return false;
          });
  
          obj.opts.on('click', function () {
              var opt = $(this);
              obj.val = opt.text();
              obj.index = opt.index();
              obj.placeholder.text(obj.val);
          });
      },
      getValue: function () {
          return this.val;
      },
      getIndex: function () {
          return this.index;
      }
  }
  
  $(function () {
  
      var dd = new dropDown($('#dd'));
  
      $(document).click(function () {
  
          $('.wrapper-dropdown-1').removeClass('active');
  
      });
  
      var $student = $('.student');
      var $classView = $('.classView');
      
      $classView.hide(); // I tried
      
  
    
  });
  </code></pre>
  <hr />
  <h1>What I have</h1>
  <p>Live Result  = <a href="http://jsfiddle.net/bheng/8cnz2r67/1/show" rel="nofollow noreferrer">http://jsfiddle.net/bheng/8cnz2r67/1/show</a></p>
  <p>Live Code = <a href="http://jsfiddle.net/bheng/8cnz2r67/1/" rel="nofollow noreferrer">http://jsfiddle.net/bheng/8cnz2r67/1/</a></p>