I have three drop down button I want to click the specific dropdown and pop up the list and display-CodePudding

I have three drop down button that I style them using the same class. When I click any of them it pops up a list where I select any list under the dropdown and display it on the button.

The problem is that it's displaying in all of the three dropdowns even though I focus on the specific drop down and I am voiding to have along code by changing each an every dropdown an ID and target on it. If there's away to do it may you please help.

.dropdownbox>button {
  color: #7C99AA;
  background-color: white;
  border: 1px solid #7C99AA;
  border-radius: 0.5em;
  padding: 0.7em 1em;
  width: 10vw;
  font-size: 12px;
  line-height: 1.4em;
  user-select: none;
  cursor: pointer;
  text-indent: 1px;
  text-overflow: '';
  text-align: center;
  outline: none;
  text-align: center;
}

ul.menu {
  list-style: none;
  position: absolute;
  margin: 0 auto;
  width: 8vw;
  overflow: hidden;
  height: 0px;
  margin-top: 2px;
  background: white;
  color: #9FA5B5;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
  padding: 5px 20;
  position: absolute;
}

ul.menu li {
  font-size: 16px;
  padding: 0.7em 0em;
  margin: -0.3em 0;
  border-radius: 0.5em;
  cursor: pointer;
}

ul.menu li:hover {
  color: white;
  background: #7C99AA;
}

.menu.showMenu {
  height: 20vh;
}

<div >
  <div >
    <button  id="penaltybtn">Select</button>
  </div>
  <ul id="menu3" >
    <li id="applicc">Not Applicable</li>
    <li id="appYes">Yes</li>
    <li id="appNo">No</li>
  </ul>
</div>
<div >
  <div >
    <button  id="offboarding">Select</button>
  </div>
  <ul id="menu1" >
    <li name="offboarding" id="resignation">Resignation</li>
    <li name="offboarding" id="contract">Contract Expiration</li>
    <li name="offboarding" id="retrenchment">Retrenchment</li>
    <li name="offboarding" id="dismissal">Dismissal</li>
    <li name="offboarding" id="retirement">Retirement</li>
  </ul>
</div>
<div >
  <div >
    <button  id="dropbtn">Collected</button>
  </div>
  <ul id="menu2" >
    <li id="returnNot" value="NotReturned">Not Returned</li>
    <li id="majority" value="majority">Majority Returned</li>
    <li id="all">All Returned</li>
  </ul>
</div>

CodePudding user response：

You can try it like this:

$('.dropdownbox').click(function() {
  $('.menu').hide();
  $(this).next('.menu').show();
});

I've also changed your css a little bit. I've removed height:0px from ul.menu and added display:none;

$('.dropdownbox').click(function() {
  $('.menu').hide();
  $(this).next('.menu').show();
});

.dropdownbox>button {
  color: #7C99AA;
  background-color: white;
  border: 1px solid #7C99AA;
  border-radius: 0.5em;
  padding: 0.7em 1em;
  width: 10vw;
  font-size: 12px;
  line-height: 1.4em;
  user-select: none;
  cursor: pointer;
  text-indent: 1px;
  text-overflow: '';
  text-align: center;
  outline: none;
  text-align: center;
}

ul.menu {
  list-style: none;
  position: absolute;
  margin: 0 auto;
  width: 8vw;
  overflow: hidden;
  margin-top: 2px;
  background: white;
  color: #9FA5B5;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
  padding: 5px 20px;
  position: absolute;
  display:none;
}

ul.menu li {
  font-size: 16px;
  padding: 0.7em 0em;
  margin: -0.3em 0;
  border-radius: 0.5em;
  cursor: pointer;
}

ul.menu li:hover {
  color: white;
  background: #7C99AA;
}

.menu.showMenu {
  height: 20vh;
}

.wrapper,.wrapCollect3,.collectWrap{

    display: inline-block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <button  id="penaltybtn">Select</button>
  </div>
  <ul id="menu3" >
    <li id="applicc">Not Applicable</li>
    <li id="appYes">Yes</li>
    <li id="appNo">No</li>
  </ul>
</div>


<div >
  <div >
    <button  id="offboarding">Select</button>
  </div>
  <ul id="menu1" >
    <li name="offboarding" id="resignation">Resignation</li>
    <li name="offboarding" id="contract">Contract Expiration</li>
    <li name="offboarding" id="retrenchment">Retrenchment</li>
    <li name="offboarding" id="dismissal">Dismissal</li>
    <li name="offboarding" id="retirement">Retirement</li>
  </ul>
</div>




<div >
  <div >
    <button  id="dropbtn">Collected</button>
  </div>
  <ul id="menu2" >
    <li id="returnNot" value="NotReturned">Not Returned</li>
    <li id="majority" value="majority">Majority Returned</li>
    <li id="all">All Returned</li>
  </ul>
</div>

CodePudding user response：

You are not too clear in your answer, and you are providing no working code, But If I get it, you need to show on the button the text you click in the submenu, like "emulating a select".

It's quite easy.

So, on the 3 main parents add a class

<div >
[...]
<div >
[...]
<div >

In js, add a function to retrieve them on click

function getParentByClass(el, className, maxDepth=10) {
  let i=0;
  while (!el.classList.contains(className)) {
    el=el.parentElement;
    i  ;
    if (i>maxDepth) return false;
  }
  return el;
}

call it like this:

// In your onclick function, 
// given "el" as the clicked submenu button
let parent = getParentByClass(el, "buttonParent")

Now find the button inside the buttonParent of the clicked submenu, and set its text as the text you clicked in the submenu

parent.querySelector('button').innerText = el.getText();

Now you just need to fix the "hide" submenu when you click outside the submenu. I leave this exercise to you, because this is not "code solution" website, and we are here always to learn! Cheers!

/// Taken from Carsten Løvbo Andersen answer
$('.dropdownbox').click(function() {
  $('.menu').hide();
  $(this).next('.menu').show();
});

//// Maybe there is some jquery version, but this is universal
/// this find parent by class name, giving a depth in search too
function getParentByClass(el, className, maxDepth=10) {
  let i=0;
  while (!el.classList.contains(className)) {
    el=el.parentElement;
    i  ;
    if (i>maxDepth) return false;
  }
  return el;
}

document.querySelectorAll("ul.menu li").forEach(function(el){
  el.addEventListener('click', function(c){
    let li = c.target;
    let t = li.innerText;
    let p = getParentByClass(li, 'parentButton');
    p.querySelector('button').innerText = t;
    $('.menu').hide();
  });
});

.dropdownbox>button {
  color: #7C99AA;
  background-color: white;
  border: 1px solid #7C99AA;
  border-radius: 0.5em;
  padding: 0.7em 1em;
  width: 10vw;
  font-size: 12px;
  line-height: 1.4em;
  user-select: none;
  cursor: pointer;
  text-indent: 1px;
  text-overflow: '';
  text-align: center;
  outline: none;
  text-align: center;
}

ul.menu {
  list-style: none;
  position: absolute;
  margin: 0 auto;
  width: 8vw;
  overflow: hidden;
  margin-top: 2px;
  background: white;
  color: #9FA5B5;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
  padding: 5px 20px;
  position: absolute;
  display:none;
}

ul.menu li {
  font-size: 16px;
  padding: 0.7em 0em;
  margin: -0.3em 0;
  border-radius: 0.5em;
  cursor: pointer;
}

ul.menu li:hover {
  color: white;
  background: #7C99AA;
}

.menu.showMenu {
  height: 20vh;
}

.wrapper,.wrapCollect3,.collectWrap{

    display: inline-block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <button  id="penaltybtn">Select</button>
  </div>
  <ul id="menu3" >
    <li id="applicc">Not Applicable</li>
    <li id="appYes">Yes</li>
    <li id="appNo">No</li>
  </ul>
</div>


<div >
  <div >
    <button  id="offboarding">Select</button>
  </div>
  <ul id="menu1" >
    <li name="offboarding" id="resignation">Resignation</li>
    <li name="offboarding" id="contract">Contract Expiration</li>
    <li name="offboarding" id="retrenchment">Retrenchment</li>
    <li name="offboarding" id="dismissal">Dismissal</li>
    <li name="offboarding" id="retirement">Retirement</li>
  </ul>
</div>




<div >
  <div >
    <button  id="dropbtn">Collected</button>
  </div>
  <ul id="menu2" >
    <li id="returnNot" value="NotReturned">Not Returned</li>
    <li id="majority" value="majority">Majority Returned</li>
    <li id="all">All Returned</li>
  </ul>
</div>