Question 221266 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Custom dropdown won't close when clicking page outside of dropdown options

I’m using this form select with image options https://codepen.io/antonandoff/pen/PmQvBz

My issue is, the dropdown only closes if you select an option within the dropdown, and not if you click outside anywhere on the page as a traditional <select> would.

I’m guessing I need some jQuery to do this, but this code below won’t open the dropdown. I’m also guessing I have something wrong with the :not() selector

   jQuery(document).on('click', 'div:not(".vodiapicker")', function(e) {
        $(".b").hide();
   });
Tags:

3

Answers


  1. 0

    You need to add a "global" click handler to hide the dropdown:

    $(document).on("click", () => $(".b").slideUp(100));

    Combine this with return false in the dropdownshow code so that showing the drop down doesn’t immediately hide it:

    $(".btn-select").click(function(){
  $(".b").slideDown(100);
  return false;
});

    Updated code:

    //test for getting url value from attr
// var img1 = $('.test').attr("data-thumbnail");
// console.log(img1);

//test for iterating over child elements
var langArray = [];
$('.vodiapicker option').each(function() {
  var img = $(this).attr("data-thumbnail");
  var text = this.innerText;
  var value = $(this).val();
  var item = '<li><img src="' + img + '" alt="" value="' + value + '"/><span>' + text + '</span></li>';
  langArray.push(item);
})

$('#a').html(langArray);

//Set the button value to the first el of the array
$('.btn-select').html(langArray[0]);
$('.btn-select').attr('value', 'en');

//change button stuff on click
$('#a li').click(function() {
  var img = $(this).find('img').attr("src");
  var value = $(this).find('img').attr('value');
  var text = this.innerText;
  var item = '<li><img src="' + img + '" alt="" /><span>' + text + '</span></li>';
  $('.btn-select').html(item);
  $('.btn-select').attr('value', value);
  $(".b").slideUp(100);
  //console.log(value);
});

$(".btn-select").click(function() {
  $(".b").slideDown(100);
  return false;
});

$(document).on("click", () => $(".b").slideUp(100));
    .vodiapicker {
  display: none;
}

#a {
  padding-left: 0px;
}

#a img,
.btn-select img {
  width: 12px;
}

#a li {
  list-style: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

#a li:hover {
  background-color: #F4F3F3;
}

#a li img {
  margin: 5px;
}

#a li span,
.btn-select li span {
  margin-left: 30px;
}


/* item list */

.b {
  display: none;
  width: 100%;
  max-width: 350px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 5px;
}

.open {
  display: show !important;
}

.btn-select {
  margin-top: 10px;
  width: 100%;
  max-width: 350px;
  height: 34px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.btn-select li {
  list-style: none;
  float: left;
  padding-bottom: 0px;
}

.btn-select:hover li {
  margin-left: 0px;
}

.btn-select:hover {
  background-color: #F4F3F3;
  border: 1px solid transparent;
  box-shadow: inset 0 0px 0px 1px #ccc;
}

.btn-select:focus {
  outline: none;
}

.lang-select {
  margin-left: 50px;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select class="vodiapicker">
  <option value="en" class="test" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/LetterA.svg/2000px-LetterA.svg.png">English</option>
  <option value="au" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/NYCS-bull-trans-B.svg/480px-NYCS-bull-trans-B.svg.png">Engllish (AU)</option>
  <option value="uk" data-thumbnail="https://glot.io/static/img/c.svg?etag=ZaoLBh_p">Chinese (Simplified)</option>
  <option value="cn" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/NYCS-bull-trans-D.svg/2000px-NYCS-bull-trans-D.svg.png">German</option>
  <option value="de" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/MO-supp-E.svg/600px-MO-supp-E.svg.png">Danish</option>
  <option value="dk" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png">French</option>
  <option value="fr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2000px-Google_%22G%22_Logo.svg.png">Greek</option>
  <option value="gr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/4H_Emblem.svg/1000px-4H_Emblem.svg.png">Italian</option>
</select>

<div class="lang-select">
  <button class="btn-select" value=""></button>
  <div class="b">
    <ul id="a"></ul>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can achieve this in several ways, here is one example how to do this.

    Since you’re creating a div as "select dropdown" you need to check if the click is not btn-select nor b

    // Check on click anywhere on document 
// if the target is not the dropdown or the button select

$(document).on('click', function(event) {
    if (!$(event.target).closest('.btn-select, .b').length) {
      $('.b').hide();
    }
  });
    Login or Signup to reply.
  3. 0 
    $('*').on('click', function(e){
    if(e.target.className != 'btn-select')
        $('.b').css('display', 'none');     
});

    This code may not work on Codepen.
    When you copy the code from Codepen to html, the code will work properly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search