CODEWITHSUNDEEP
javascriptjqueryhtml
Disha
Disha

Reputation: 19

Hide value from dropdown and add it back if another value selected

I have a dropdown list. If the item is selected I want to remove the value from the list and add the value back if any other item is selected. For example, if I select "A". I want to remove "A" from the list and then I select "B", I want to add back "A to the list." How can I do this with jQuery?

<dl id='assettypes' class="dropdown">
  <dt>
  <a href="#">
     <span>
        Select option
     </span>                                              
   </a>
  </dt>
  <dd>
    <ul id="ggg">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
    </ul>
  </dd>
</dl>

Upvotes: 2

Views: 44

Answers (1)

Eddie
Eddie

Reputation: 26844

One option is to show/hide the <li>

$("#ggg a").click(function() {
  $("#ggg li").show();               //Show all <li>
  $(this).parent().hide();           //Select the parent <li> and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl id='assettypes' class="dropdown">
  <dt>
    <a href="#">
      <span>
        Select option
      </span>                                              
    </a>
  </dt>
  <dd>
    <ul id="ggg">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
    </ul>
  </dd>
</dl>

Another option, if the selected <li> has class selected, you can just use CSS like:

<style> 
    #ggg .selected {
        display: none;
    }
</style>

Upvotes: 1

Related Questions