How to sort a dropdown list when I click a specific button

Question

I'm new to jQuery and JavaScript, may you please help I have three dropdown lists, so I want to sort them when I click a button using one function that will work for three of them, on my code when I click any select button it adds all of the information e.g. when I click the first dropdown list button it adds information for two and three.

   $(".dropbtn").click(function () {
   var $list = $(".menu");
   $list.children().detach().sort(function (a, b) {
   return $(a).text().localeCompare($(b).text());
  }).appendTo($list);
  });

.dropbtn {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.4em;
padding-left: 1vw;
padding-right: 1vw;
width: fit-content;
font-size: 13px;
cursor: pointer;
float: right;
text-align: center;
outline: none;
margin-left: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
                            <div class="dropdownbox buttonWrap" id="dropdown_1">
                                <button class="dropbtn" id="offboarding">Select</button>
                            </div>
                            <ul id="menu1" class="menu list_menu">
                                <li class="li" id="resignation">Resignation</li>
                                <li class="li" id="contract">Contract Expiration</li>
                                <li class="li" id="retrenchment">Retrenchment</li>
                                <li class="li" id="dismissal">Dismissal</li>
                                <li class="li" id="retirement">Retirement</li>
                            </ul>
                        </div>

                              <div class="collecWrap">
                                <div class="dropdownbox buttonWrap" id="dropdown_2">
                                    <button class="dropbtn" id="dropbtn">Select</button>
                                </div>
                                <ul id="menu2" class="menu list_menu">
                                    <li id="returnNot">Not Returned</li>
                                    <li id="majority">Majority Returned</li>
                                    <li id="all">All Returned</li>
                                    <li id="notApplicable">Not Applicable</li>
                                </ul>
                            </div>

                               <div class="wrapCollect3">
                                <div class="dropdownbox buttonWrap" id="dropdown_3">
                                    <button class="dropbtn" 
                                 id="penaltybtn">Select</button>
                                </div>
                                <ul id="menu3" class="menu  list_menu">
                                    <li id="applicc">Not Applicable</li>
                                    <li id="appYes">Yes</li>
                                    <li id="appNo">No</li>
                                </ul>
                            </div>

Carsten Løvbo Andersen · Accepted Answer · 2022-10-17 09:06:22Z

Problem is that your $('.menu') selector will select all 3 dropdowns, and not the one associated with the clicked button.

So change this:

var $list = $(".menu");

to this:

var $list = $(this).parent().next(".menu");

$(".dropbtn").click(function() {
  var $list = $(this).parent().next(".menu");
  $list.children().detach().sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
  }).appendTo($list);
});

dropbtn {
  color: #7C99AA;
  background-color: white;
  border: 1px solid #7C99AA;
  border-radius: 0.5em;
  padding: 0.4em;
  padding-left: 1vw;
  padding-right: 1vw;
  width: fit-content;
  font-size: 13px;
  cursor: pointer;
  float: right;
  text-align: center;
  outline: none;
  margin-left: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="dropdownbox buttonWrap" id="dropdown_1">
    <button class="dropbtn" id="offboarding">Select</button>
  </div>
  <ul id="menu1" class="menu list_menu">
    <li class="li" id="resignation">Resignation</li>
    <li class="li" id="contract">Contract Expiration</li>
    <li class="li" id="retrenchment">Retrenchment</li>
    <li class="li" id="dismissal">Dismissal</li>
    <li class="li" id="retirement">Retirement</li>
  </ul>
</div>

<div class="collecWrap">
  <div class="dropdownbox buttonWrap" id="dropdown_2">
    <button class="dropbtn" id="dropbtn">Select</button>
  </div>
  <ul id="menu2" class="menu list_menu">
    <li id="returnNot">Not Returned</li>
    <li id="majority">Majority Returned</li>
    <li id="all">All Returned</li>
    <li id="notApplicable">Not Applicable</li>
  </ul>
</div>

<div class="wrapCollect3">
  <div class="dropdownbox buttonWrap" id="dropdown_3">
    <button class="dropbtn" id="penaltybtn">Select</button>
  </div>
  <ul id="menu3" class="menu  list_menu">
    <li id="applicc">Not Applicable</li>
    <li id="appYes">Yes</li>
    <li id="appNo">No</li>
  </ul>
</div>

Collectives™ on Stack Overflow

How to sort a dropdown list when I click a specific button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related