从下拉列表中删除选择的选项

Question

I have built a dropdown using an unordered list.

It looks like this:

<div id="dd" class="wrapper-dropdown" tabindex="1">
    <span>Default Option</span>
    <ul class="dropdown">
        <li><a href="#"><i></i>Default Option</a></li>
        <li><a href="#"><i></i>Option 1</a></li>
        <li><a href="#"><i></i>Option 2</a></li>
        <li><a href="#"><i></i>Option 3</a></li>
        <li><a href="#"><i></i>Option 4</a></li>
    </ul>
</div>

Then I use this javascript function to make it behave as a dropdown:

function DropDown(el) {
  this.dd = el;
  this.placeholder = this.dd.children('span');
  this.opts = this.dd.find('ul.dropdown > 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(){
      obj.opts.show();
      $(this).hide();
      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() {
    // all dropdowns
    $('.wrapper-dropdown').removeClass('active');
  });

});

What I want to achieve is to have the selected option disappear from the dropdown menu so that it does not look repetitive as it does now (selecting Option 1 does not remove it from the list) Can anyone suggest a way to do it without having to rebuild the javascript?

Thank you everyone

Here is jsfiddle

Answer 1

Working fiddle .

You could hide the clicked option using hide() method :

$(obj.opts[0]).hide();
obj.opts.on('click',function(){
    obj.opts.show(); //Show all
    $(this).hide(); //Hide the clicked one

    var opt = $(this);
    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text(obj.val);
});

Hope this helps.

---

 function DropDown(el) { this.dd = el; this.placeholder = this.dd.children('span'); this.opts = this.dd.find('ul.dropdown > 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[0]).hide(); obj.opts.on('click',function(){ obj.opts.show(); $(this).hide(); 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() { // all dropdowns $('.wrapper-dropdown').removeClass('active'); }); }); 

 *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } ::selection { background: transparent; } ::-moz-selection { background: transparent; } .wrapper-demo { margin: 60px 0 0 0; *zoom: 1; font-weight: 400; } .wrapper-demo:after { clear: both; content: ""; display: table; } .wrapper-dropdown { /* Size and position */ position: relative; width: 200px; margin: 0 auto; padding: 10px; /* Styles */ background: #fff; border-radius: 7px; border: 1px solid rgba(0,0,0,0.15); cursor: pointer; outline: none; /* Font settings */ font-weight: bold; color: #8AA8BD; } .wrapper-dropdown:after { content: ""; width: 0; height: 0; position: absolute; right: 15px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #8aa8bd transparent; } .wrapper-dropdown .dropdown { /* Size & position */ position: absolute; top: 102%; left: -1px; right: -1px; /* Styles */ background: white; border-radius: 0 0 7px 7px; border-top: none; border-left: 1px solid blue; border-right: 1px solid blue; border-bottom: 1px solid blue; font-weight: normal; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -ms-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; list-style: none; /* Hiding */ opacity: 0; pointer-events: none; } .wrapper-dropdown .dropdown li a { display: block; padding: 10px; text-decoration: none; color: #8aa8bd; border-bottom: 1px solid #e6e8ea; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .wrapper-dropdown .dropdown li i { float: right; color: inherit; } .wrapper-dropdown .dropdown li:first-of-type a { border-radius: 7px 7px 0 0; } .wrapper-dropdown .dropdown li:last-of-type a { border: none; border-radius: 0 0 7px 7px; } /* Hover state */ .wrapper-dropdown .dropdown li:hover a { background: #f3f8f8; } /* Active state */ .wrapper-dropdown.active { border-radius: 7px 7px 0 0; border-top: 1px solid blue; border-left: 1px solid blue; border-right: 1px solid blue; border-bottom: 1px solid #e6e8ea; } .wrapper-dropdown.active .dropdown { opacity: 1; pointer-events: auto; } /* No CSS3 support */ .no-opacity .wrapper-dropdown .dropdown, .no-pointerevents .wrapper-dropdown .dropdown { display: none; opacity: 1; /* If opacity support but no pointer-events support */ pointer-events: auto; /* If pointer-events support but no pointer-events support */ } .no-opacity .wrapper-dropdown.active .dropdown, .no-pointerevents .wrapper-dropdown.active .dropdown { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dd" class="wrapper-dropdown" tabindex="1"> <span>Default Option</span> <ul class="dropdown"> <li><a href="#"><i></i>Default Option</a></li> <li><a href="#"><i></i>Option 1</a></li> <li><a href="#"><i></i>Option 2</a></li> <li><a href="#"><i></i>Option 3</a></li> <li><a href="#"><i></i>Option 4</a></li> </ul> </div>