prosenjit-itobuz
10/30/2015 - 5:08 AM

Custom SelectBox

Custom SelectBox

jsbin.wepaci.js
content_copyfile_download
$('.selectbox_itemlist span').on('click',function () {
    var pick, value, parent;
    pick = $(this).text();
    value = $(this).attr('data-value');
    parent = $(this).parent().parent();
    parent.find('.selectbox_toggle').text(pick)
    .append('<span class="selectbox__arrow"></span>')
    .attr('data-value', value);        
  });
$('.selectbox_toggle').on('click',function(e){  
  e.stopPropagation();
  $('.selectbox_toggle').parent().removeClass('open');
  $(this).parent().toggleClass('open');
});
$(window).on('click',function(){
  $('.selectbox.open').removeClass('open');
});
jsbin.wepaci.css
content_copyfile_download
body {
  background:#aaa;
}
.selectbox {
  background: #fff;  
  border:1px solid #ccc;
  position: relative;
  margin:100px 0 0;
}
.selectbox.open .selectbox_itemlist {
  display:block;
} 
.selectbox_toggle {
  padding: 5px;
}
.selectbox__arrow {
  position:absolute;
  right:8px;
  top : 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 6px 0 6px;
  border-color: #727578 transparent transparent transparent;
  -webkit-transform:rotate(360deg);
}
.selectbox_itemlist {
   display:none; 
  position: absolute;
  top:100%;
  width:100%
}
.selectbox__item {
  display:block;
  padding:5px 5px;
  background:#fbfbfb;
  border-bottom:1px solid #ddd;
}
.selectbox__item:first-child {
  border-bottom:1px solid #ddd;
}
.selectbox__input {
  display:none;
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
  background:#aaa;
}
.selectbox {
  background: #fff;  
  border:1px solid #ccc;
  position: relative;
  margin:100px 0 0;
}
.selectbox.open .selectbox_itemlist {
  display:block;
} 
.selectbox_toggle {
  padding: 5px;
}
.selectbox__arrow {
  position:absolute;
  right:8px;
  top : 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 6px 0 6px;
  border-color: #727578 transparent transparent transparent;
  -webkit-transform:rotate(360deg);
}
.selectbox_itemlist {
   display:none; 
  position: absolute;
  top:100%;
  width:100%
}
.selectbox__item {
  display:block;
  padding:5px 5px;
  background:#fbfbfb;
  border-bottom:1px solid #ddd;
}
.selectbox__item:first-child {
  border-bottom:1px solid #ddd;
}
.selectbox__input {
  display:none;
}
</style>
</head>
<body>
  <div class="selectbox">
    <div class="selectbox_toggle">
      All items <span class="selectbox__arrow"></span>
    </div>
    <div class="selectbox_itemlist">
      <span class="selectbox__item" data-value="Item 1">Item 1</span>
      <span class="selectbox__item" data-value="Item 2">Item 2</span>
    </div> 
    <input type="text" id="" name="" class="selectbox__input">
  </div>
  
  <div class="selectbox">
    <div class="selectbox_toggle">
      All items <span class="selectbox__arrow"></span>
    </div>
    <div class="selectbox_itemlist">
      <span class="selectbox__item" data-value="Item 1">Item 1</span>
      <span class="selectbox__item" data-value="Item 2">Item 2</span>
    </div>
    <input type="text" id="" name="" class="selectbox__input">
  </div>

<script id="jsbin-javascript">
$('.selectbox_itemlist span').on('click',function () {
    var pick, value, parent;
    pick = $(this).text();
    value = $(this).attr('data-value');
    parent = $(this).parent().parent();
    parent.find('.selectbox_toggle').text(pick)
    .append('<span class="selectbox__arrow"></span>')
    .attr('data-value', value);        
  });
$('.selectbox_toggle').on('click',function(e){  
  e.stopPropagation();
  $('.selectbox_toggle').parent().removeClass('open');
  $(this).parent().toggleClass('open');
});
$(window).on('click',function(){
  $('.selectbox.open').removeClass('open');
});
</script>


<script id="jsbin-source-css" type="text/css">body {
  background:#aaa;
}
.selectbox {
  background: #fff;  
  border:1px solid #ccc;
  position: relative;
  margin:100px 0 0;
}
.selectbox.open .selectbox_itemlist {
  display:block;
} 
.selectbox_toggle {
  padding: 5px;
}
.selectbox__arrow {
  position:absolute;
  right:8px;
  top : 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 6px 0 6px;
  border-color: #727578 transparent transparent transparent;
  -webkit-transform:rotate(360deg);
}
.selectbox_itemlist {
   display:none; 
  position: absolute;
  top:100%;
  width:100%
}
.selectbox__item {
  display:block;
  padding:5px 5px;
  background:#fbfbfb;
  border-bottom:1px solid #ddd;
}
.selectbox__item:first-child {
  border-bottom:1px solid #ddd;
}
.selectbox__input {
  display:none;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">$('.selectbox_itemlist span').on('click',function () {
    var pick, value, parent;
    pick = $(this).text();
    value = $(this).attr('data-value');
    parent = $(this).parent().parent();
    parent.find('.selectbox_toggle').text(pick)
    .append('<span class="selectbox__arrow"></span>')
    .attr('data-value', value);        
  });
$('.selectbox_toggle').on('click',function(e){  
  e.stopPropagation();
  $('.selectbox_toggle').parent().removeClass('open');
  $(this).parent().toggleClass('open');
});
$(window).on('click',function(){
  $('.selectbox.open').removeClass('open');
});</script></body>
</html>