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 stackoverflow.com/questions/152975/… — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Jan 3, 2018 at 5:54

Jithin Raj P R · Accepted Answer · 2018-02-26 07:10:21Z

6

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.

edited Feb 26, 2018 at 7:10

answered Jan 3, 2018 at 5:43

Jithin Raj P R

6,8469 gold badges41 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

divy3993 Over a year ago

What if body is not covering the window height? Will it still work? Try your demo with full screen.

Jithin Raj P R Over a year ago

@divy3993 It will work in all height, as long as you are clicking on your page's body.

divy3993 Over a year ago

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

Jithin Raj P R Over a year ago

@divy3993 sorry, I don't get you, In every case, if you are using a <body> 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 Over a year ago

@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.

|

divy3993 · Accepted Answer · 2018-01-03 05:46:45Z

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.

Mehdi Dehghani · Accepted Answer · 2018-01-03 05:42:51Z

1

The key is Event.stopPropagation()

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

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

answered Jan 3, 2018 at 5:42

Mehdi Dehghani

11.7k6 gold badges64 silver badges68 bronze badges

1 Comment

S.Serpooshan Over a year ago

Clean answer to show the main point. To close the drop down: $(".custom-dropdown-list").removeClass("open");

Amitesh Kumar · Accepted Answer · 2018-01-03 05:46:29Z

0

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();
    }
});

answered Jan 3, 2018 at 5:46

Amitesh Kumar

3,0891 gold badge28 silver badges42 bronze badges

Comments

Alexander Solonik · Accepted Answer · 2018-01-03 08:04:42Z

0

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

answered Jan 3, 2018 at 8:04

Alexander Solonik

10.4k20 gold badges88 silver badges189 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

6 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related