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

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=".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>

$(".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./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/5zgyouwL/1/

Share Improve this question edited Jan 3, 2018 at 5:49 Jithin Raj P R 6,8278 gold badges41 silver badges71 bronze badges asked Jan 3, 2018 at 5:33 Kundan SIngh 7382 gold badges12 silver badges34 bronze badges

You can collect all the below answers here stackoverflow./questions/152975/… – Suresh Ponnukalai Commented Jan 3, 2018 at 5:54

Add a ment |

5 Answers 5

Sorted by: Reset to default 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./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.

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

The key is Event.stopPropagation()

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

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

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to close custom jquery drop down using like default select dropdown - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)