How to close the custom select option box

Question

I've a custom select option box but I've a bug.

The bug is now, how do I close the custom select options when clicked outside.

In the default select options when clicked outside then the select options hide away and then again when clicked select box again the select options appear.

I want the same to appear to my custom select options.

<style type='text/css'>
        div.selectBox
        {
            position:relative;
            display:inline-block;
            cursor:default;
            text-align:left;
            line-height:30px;
            clear:both;
            color:#888;
        }
        span.selected
        {
            width:167px;
            text-indent:20px;
            border:1px solid #ccc;
            border-right:none;
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
            background:#f6f6f6;
            overflow:hidden;
        }
        span.selectArrow
        {
            width:30px;
            border:1px solid #60abf8;
            border-top-right-radius:5px;
            border-bottom-right-radius:5px;
            text-align:center;
            font-size:20px;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            background:#4096ee;
        }

        span.selectArrow,span.selected
        {
            position:relative;
            float:left;
            height:30px;
            z-index:1;
        }

        div.selectOptions
        {
            position:absolute;
            top:28px;
            left:0;
            width:198px;
            border:1px solid #ccc;
            border-bottom-right-radius:5px;
            border-bottom-left-radius:5px;
            overflow:hidden;
            background:#f6f6f6;
            padding-top:2px;
            display:none;
        }

        span.selectOption
        {
            display:block;
            width:80%;
            line-height:20px;
            padding:5px 10%;
        }

        span.selectOption:hover
        {
            color:#f6f6f6;
            background:#4096ee; 
        }           
 </style>

  <div class='selectBox'>
        <span class='selected'></span>
        <span class='selectArrow'>&#9660</span>
        <div class="selectOptions" >
            <span class="selectOption" value="Option 1">Rob</span>
            <span class="selectOption" value="Option 2">Charles</span>
            <span class="selectOption" value="Option 3">Smith</span>
        </div>
    </div>


 <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

 <script type='text/javascript'><!--
        $(document).ready(function() {
            enableSelectBoxes();
        });

        function enableSelectBoxes(){
            $('div.selectBox').each(function(){
                $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
                $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));

                $(this).children('span.selected,span.selectArrow').click(function(){
                    if($(this).parent().children('div.selectOptions').css('display') == 'none'){
                        $(this).parent().children('div.selectOptions').css('display','block');
                    }
                    else
                    {
                        $(this).parent().children('div.selectOptions').css('display','none');
                    }
                });

                $(this).find('span.selectOption').click(function(){
                    $(this).parent().css('display','none');
                    $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
                    $(this).parent().siblings('span.selected').html($(this).html());
                });
            });             
        }//-->
    </script>

possible duplicate of [Use jQuery to hide a DIV when the user clicks outside of it](http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) — artm, Apr 19 '15 at 05:04

score 3 · Accepted Answer · edited May 23 '17 at 12:31

3

Working Fiddle

Use following

//My code

$(document).mouseup(function (e)
{
    var container = $(".selectBox");

    if (!container.is(e.target)
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $(".selectOptions").hide();
    }
});

For more refer here

edited May 23 '17 at 12:31

Community

1
1

answered Apr 19 '15 at 04:40

Pratik Joshi

11,485
7
41
73

Thanks. But I've another bug.that is When I have two select box and when I open one and at the same time when i open the second the first one is still opened. so how canI close that when opening two select options at the same time? – Firnas Apr 19 '15 at 08:07
Why not , let me try that too! :) – Pratik Joshi Apr 19 '15 at 08:24
Thanks. I'm eagerly waiting for your reply. – Firnas Apr 19 '15 at 08:31
1

@Mohamed , hey buddy , TAKE YOUR FIDDLE :) Enjoy :) http://jsfiddle.net/pt9tryp2/27/ – Pratik Joshi Apr 19 '15 at 08:57
@Mohamed and mohmmad , you made nice custom dropdown menu! :) – Pratik Joshi Apr 19 '15 at 09:08
Thanks for your support for this custom select box. Dude the answer for the second one works good in jsfiddle and codepen but its not working on my live site. – Firnas Apr 20 '15 at 04:00
Then fix the issue with JS :) Its working on codepen,jsfiddle , so you must have made some mistake in your code for sure :) . I hope ,you will find issue in your code! – Pratik Joshi Apr 20 '15 at 04:02
Thanks for your support to create a final cut custom select box. ;) – Firnas Apr 20 '15 at 04:12
@Mohamed , welcome . and do it yourself , you get experience by falling ! – Pratik Joshi Apr 20 '15 at 04:21
Thats 100% true dude :) – Firnas Apr 20 '15 at 04:32
I need an urgent help from you regarding this select option. – Firnas Apr 25 '15 at 10:58
Waiting for your reply @jquery – Firnas Apr 25 '15 at 10:58
Say it dude . Or post a question on stack overflow. And paste here link. I will answer for sure – Pratik Joshi Apr 25 '15 at 12:03
Thanks Dude :) http://stackoverflow.com/questions/29864478/how-to-create-a-custom-select-option/29864562#29864562 – Firnas Apr 25 '15 at 14:55
Can you do me a help in this select option? – Firnas Apr 28 '15 at 10:37

score 2 · Answer 2 · edited Feb 29 '16 at 01:00

Use overlay when the select-box is open. When clicked on overlay, close the select-box. Here is the changes made.

CSS:

.selectBox {
    z-index: 101;
    /* should be 1 greater than overlay's z-index */
}
.overlay {
    z-index: 100;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0.5;
    background-color: black;
    display: none;
}

Javascript:

$('.overlay').bind('click', function() {
    $('.selectBox .selectOptions').slideUp();
    $(this).hide();
});

When the selectBox is opened, show overlay, and hide the overlay when the selectBox is closed.

opacity of the overlay is shown for the purpose of understanding how it works. You can set opacity to zero.

Demo

$(document).ready(enableSelectBoxes);

function enableSelectBoxes() {
    $('div.selectBox').each(function() {
      $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
      $(this).attr('value', $(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));

      $(this).children('span.selected,span.selectArrow').click(function() {
        if ($(this).parent().children('div.selectOptions').css('display') == 'none') {
          $(this).parent().children('div.selectOptions').css('display', 'block');
          $('.overlay').show();
        } else {
          $(this).parent().children('div.selectOptions').css('display', 'none');
        }
      });

      $(this).find('span.selectOption').click(function() {
        $('.selectBox .selectOptions').slideUp();
        $('.overlay').hide();
        $(this).parent().css('display', 'none');
        $(this).closest('div.selectBox').attr('value', $(this).attr('value'));
        $(this).parent().siblings('span.selected').html($(this).html());
      });
    });
  } //-->

$('.overlay').bind('click', function() {
  $('.selectBox .selectOptions').slideUp();
  $(this).hide();
});

div.selectBox {
  position: relative;
  display: inline-block;
  cursor: default;
  text-align: left;
  line-height: 30px;
  clear: both;
  color: #888;
  z-index: 101;
}
span.selected {
  width: 167px;
  text-indent: 20px;
  border: 1px solid #ccc;
  border-right: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background: #f6f6f6;
  overflow: hidden;
}
span.selectArrow {
  width: 30px;
  border: 1px solid #60abf8;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  text-align: center;
  font-size: 20px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  background: #4096ee;
}
span.selectArrow,
span.selected {
  position: relative;
  float: left;
  height: 30px;
  z-index: 1;
}
div.selectOptions {
  position: absolute;
  top: 28px;
  left: 0;
  width: 198px;
  border: 1px solid #ccc;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
  background: #f6f6f6;
  padding-top: 2px;
  display: none;
}
span.selectOption {
  display: block;
  width: 80%;
  line-height: 20px;
  padding: 5px 10%;
}
span.selectOption:hover {
  color: #f6f6f6;
  background: #4096ee;
}
.overlay {
  z-index: 100;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0.5;
  background-color: black;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class='selectBox'> <span class='selected'></span>
  <span class='selectArrow'>&#9660</span>

  <div class="selectOptions"> <span class="selectOption" value="Option 1">Rob</span>
    <span class="selectOption" value="Option 2">Charles</span>
    <span class="selectOption" value="Option 3">Smith</span>

  </div>
</div>
<div class="overlay"></div>

See fiddle

You are a lifesaver, dude. I applied this concept to vanilla JS and still worked as a charm. Thanks! — Luis Febro, Sep 02 '20 at 21:14

score 0 · Answer 3 · answered Apr 19 '15 at 04:59

0

If you can add focus to the object when its clicked, then you can have an event listener that listens to when it loses focus (ie: when you click outside the box) and in that event handler, just close it.

answered Apr 19 '15 at 04:59

carinlynchin

389
1
3
13

How to close the custom select option box

3 Answers3