How to close custom jquery drop down using like default select dropdown

Question

I am trying to close a custom jquery drop down on click of outside of dropdown, just like default behavior of HTML select dropdown, I tried to use the window click but that is creating trouble in opening the dropdown it self.

$(".selected").click(function() {
  $(".custom-dropdown-list").toggleClass("open");
});

$(".custom-dropdown-list li").click(function() {
  var dataVal = $(this).attr("data-val");
  var dpText1 = $(this).children('.dp-val1').text();
  var dpText2 = $(this).children('.dp-val2').text();
  $(".selected").attr("data-val", dataVal);
  $(".selected .dp-val1").text(dpText1);
  $(".selected .dp-val2").text(dpText2);
  $(".custom-dropdown-list").removeClass("open");
});

.custom-dropdown {
  width: 300px;
}

.selected {
  padding: 5px;
  cursor: pointer;
  min-height: 37px;
  background-color: #ccc;
}

.custom-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.custom-dropdown-list.open {
  display: block;
}

.custom-dropdown-list li {
  padding: 5px;
  cursor: pointer;
}

.custom-dropdown-list li:hover {
  background: #f2f2f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
  <div class="selected" data-val="">
    <div class="dp-val1">
      Selected Bank</div>
    <div class="dp-val2">
    </div>
  </div>
  <ul class="custom-dropdown-list">
    <li data-val="0">
      <div class="dp-val1">Option Dp0</div>
      <div class="dp-val2">5879464954426 (LKP)</div>
    </li>
    <li data-val="1">
      <div class="dp-val1">Option Dp1</div>
      <div class="dp-val2">5879464954426 (LKP)</div>
    </li>
    <li data-val="2">
      <div class="dp-val1">Option Dp2</div>
      <div class="dp-val2">5879464954426 (LKP)</div>
    </li>
    <li data-val="3">
      <div class="dp-val1">Option Dp3</div>
      <div class="dp-val2">5879464954426 (LKP)</div>
    </li>
    <li data-val="4">
      <div class="dp-val1">Option Dp4</div>
      <div class="dp-val2">5879464954426 (LKP)</div>
    </li>
  </ul>
</div>

JSfiddle

https://jsfiddle.net/5zgyouwL/1/

You can collect all the below answers here https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element — Suresh Ponnukalai, Jan 03 '18 at 05:54

Jithin Raj P R · Accepted Answer · 2018-02-26T07:10:21.990

This will work fine for you:

In this method I have used event.stopPropagation();

Your method was right on the path, it just needed some tweaks - I have used the click on the <html> to but the difference is that I have prevented the body click on the .selected and .custom-dropdown-list li using event.stopPropagation();.

$("html").click(function(event) {
  $(".custom-dropdown-list").removeClass("open");
});

$(".selected").click(function() {
  event.stopPropagation();
  $(".custom-dropdown-list").toggleClass("open");
});


$(".custom-dropdown-list li").click(function() {
  event.stopPropagation();
  var dataVal = $(this).attr("data-val");
  var dpText1 = $(this).children('.dp-val1').text();
  var dpText2 = $(this).children('.dp-val2').text();
  $(".selected").attr("data-val", dataVal);
  $(".selected .dp-val1").text(dpText1);
  $(".selected .dp-val2").text(dpText2);
  $(".custom-dropdown-list").removeClass("open");
});

.custom-dropdown {
  width: 300px;
}

.selected {
  padding: 5px;
  cursor: pointer;
  min-height: 37px;
  background-color: #ccc;
}

.custom-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.custom-dropdown-list.open {
  display: block;
}

.custom-dropdown-list li {
  padding: 5px;
  cursor: pointer;
}

.custom-dropdown-list li:hover {
  background: #f2f2f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
  <div class="selected" data-val="">
    <div class="dp-val1">
      Selected Bank</div>
    <div class="dp-val2">
    </div>
  </div>
  <ul class="custom-dropdown-list">
    <li data-val="0">
      <div class="dp-val1">Option Dp0</div>
      <div class="dp-val2">5879464954466 (LKP)</div>
    </li>
    <li data-val="1">
      <div class="dp-val1">Option Dp1</div>
      <div class="dp-val2">5879464954466 (LKP)</div>
    </li>
    <li data-val="2">
      <div class="dp-val1">Option Dp2</div>
      <div class="dp-val2">5879464954466 (LKP)</div>
    </li>
    <li data-val="3">
      <div class="dp-val1">Option Dp3</div>
      <div class="dp-val2">5879464954466 (LKP)</div>
    </li>
    <li data-val="4">
      <div class="dp-val1">Option Dp4</div>
      <div class="dp-val2">5879464954466 (LKP)</div>
    </li>
  </ul>
</div>

Hope this was helpfull.

What if body is not covering the window height? Will it still work? Try your demo with full screen. — divy3993, Jan 03 '18 at 05:53
@divy3993 It will work in all height, as long as you are clicking on your page's body. — Jithin Raj P R, Jan 03 '18 at 05:55
Yeah, you need body to be same as window height to work, for it to work. But that might not be the case all time — divy3993, Jan 03 '18 at 05:56
@divy3993 sorry, I don't get you, In every case, if you are using a `` tag in your page the height of the window or document should be same as the body. In HTML every component should come underbody, so this will work fine. — Jithin Raj P R, Jan 03 '18 at 06:02
@DragonBorn ok, Now I get it. It's in the fiddle right. because the body is not `100%` as the fiddle page. But this will work well in real life scenario guys. But i will fix it for you guyz. — Jithin Raj P R, Jan 03 '18 at 06:05
@divy3993 I fixed it using a simple fix - by adding `html` with the `body` ty for the heads up bro. :) — Jithin Raj P R, Jan 03 '18 at 06:08

divy3993 · Answer 2 · 2018-01-03T05:46:45.863

I think what you might want is when clicked anywhere else of custom select/dropdown it must close.

So here it is:

$(".selected").click(function(){
  $(".custom-dropdown-list").toggleClass("open");
});

$(".custom-dropdown-list li").click(function(){
    var dataVal = $(this).attr("data-val");
    var dpText1 = $(this).children('.dp-val1').text();
    var dpText2 = $(this).children('.dp-val2').text();    
    $(".selected").attr("data-val", dataVal);
    $(".selected .dp-val1").text(dpText1);
    $(".selected .dp-val2").text(dpText2);
  $(".custom-dropdown-list").removeClass("open");  
});

/*Mouse click anywhere but custom select dropdown, will close it. */
$(document).mouseup(function (e) {
 var container = $(".custom-dropdown");
 if (!container.is(e.target) && container.has(e.target).length === 0) {
        $(".custom-dropdown-list").removeClass("open");
    }
});

.custom-dropdown { width:300px;}
.selected { padding:5px; cursor:pointer; min-height:37px; background-color:#ccc;}
.custom-dropdown-list { list-style:none; padding:0; margin:0; display:none;}
.custom-dropdown-list.open {  display:block;}
.custom-dropdown-list li { padding:5px; cursor:pointer;}
.custom-dropdown-list li:hover { background:#f2f2f2;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954466 (LKP)</div> 
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
</ul>
</div>

You wouldn't want to open the dropdown when clicked anywhere on the screen. — DragonBorn, Jan 03 '18 at 05:43

score 1 · Answer 3 · answered Jan 03 '18 at 05:42

1

The key is Event.stopPropagation()

$('body').on('click', function(){
    // close the drop down
});

$('.custom-dropdown').on('click', function(e){
    e.stopPropagation();    
});

answered Jan 03 '18 at 05:42

Mehdi Dehghani

10,970
6
59
64

1

Clean answer to show the main point. To close the drop down: `$(".custom-dropdown-list").removeClass("open");` – S.Serpooshan Jan 03 '18 at 06:18

score 0 · Answer 4 · answered Jan 03 '18 at 05:46

You use Mouse Up Event Also Like this

$(document).mouseup(function(e) 
{
    var container = $(".custom-dropdown");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

score 0 · Answer 5 · answered Jan 03 '18 at 08:04

I believe @weBer answered your question , but another way to do this is to have an event handler right on your html element and inside that check if the targeted element or its children are being clicked :

$('html').on('click' , function(e){
   if($(e.target).closest('.custom-dropdown').length ) return 
   $(".custom-dropdown-list").toggleClass("open");
});

FIDDLE HERE

How to close custom jquery drop down using like default select dropdown

5 Answers5