Create a custom select box dropdown using jQuery

Question

I am trying to style the input[text] and ul list to function as select-option. However, my below code breaks after I selected an option. As the code below, if I select an option from a list, the value of the input[text] change but the list doesn't hide itself. If I uncomment the line in the javascript, the list will hide after I select an option, the list won't show again if I click on the input again. Could anyone help me to fix this problem? I don't know much about jquery and javascript, so I spend couple hours trying to debug but it doesn't fix at all.

$(document).ready(function() {

 selecta("#a", "#b")
 $("#a").click(function() {
  $("#b").show();
 });
});


function selecta(a, b) {
 $(b + " li").click(function() {
  $(b).hide();
  /*$(b + " ul").hide();*/
  var v = $(this).text();
  $(a + " input").val(v);
 });
}

.cselect {
  position: relative;
}
.cselect input[type]:disabled {
  background: #fff;
}

.cselect-menu {
  display: none;
  position: absolute;
 /* top: 0px;*/
  left: 0px;
  width: 100%;
  background: #fff;
}

.cselect-menu ul {
  border: 1px solid #d6d6d6;
  width: 100%;

}
.cselect-menu li {
  padding: 10px 5%;
  width: 90%;
}

.cselect-menu li:hover {
  background: rgba(41, 128, 185, 0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="a" class="cselect">
  <input    type="text" disabled placeholder="Select"/>
  <div id="b" class="cselect-menu">
    <ul >
      <li>Business</li>
      <li>Hair</li>
    </ul>
  </div>
</div>

Roko C. Buljan · Accepted Answer · 2015-06-03T01:02:37.590

3

jsBin demo

Use event.stopPropagation(); to prevent clicks on #b propagate to the parent #a

function selecta(a, b) {
    $(b + " li").click(function( event ) {
      event.stopPropagation();             // HERE!
        $(b).hide();
        /*$(b + " ul").hide();*/
        var v = $(this).text();
        $(a + " input").val(v);
    });
}

Frankly... I'f I wanted to use your code on multiple custom-dropdowns of yours I'd go mad with that jQuery...

Here I've simplified HTML, CSS and jQuery:

$(function() { // DOM ready


  $(".cselect").each(function(){

    var $input = $(this).find("input");
    var $dropDown = $(this).find("ul");

    $(this).on("click", function(){
      $dropDown.stop().slideToggle();
    });

    $dropDown.on("click", "li", function(){
      $input.val( $(this).text() );
    });

  });

});

*{margin:0; padding:0;} /* ugly reset */

.cselect {
  position: relative;
}
.cselect input{
  background: #fff;
}
.cselect ul{
  display: none;
  position: absolute;
  z-index:999;
  left: 0;
  top: 1.2rem;
  margin:0;
  width: 100%;
  background: #fff;
  border: 1px solid #d6d6d6;
}
.cselect li {
  padding: 10px 5%;
  list-style:none;
}
.cselect li:hover {
  background: rgba(41, 128, 185, 0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cselect">
  <input type="text" disabled placeholder="Select n1">
  <ul>
    <li>Business</li>
    <li>Hair</li>
  </ul>
</div>

<div class="cselect">
  <input type="text" disabled placeholder="Select n2">
  <ul>
    <li>Something</li>
    <li>Else</li>
  </ul>
</div>

edited Jun 03 '15 at 01:02

answered Jun 03 '15 at 00:28

Roko C. Buljan

196,159
39
305
313

Perfect, thank you. I can't accept your answer right now since I need to wait for 2 mins. Will do it after 2 pass. – Jason Jun 03 '15 at 00:35
@Jason :) you're welcome. I'm about to show you in a minute another (nicer) way how to achieve the same. – Roko C. Buljan Jun 03 '15 at 00:39
1

@Jason done, take a look. Now one simple and readable jQuery can handle infinite custom dropdowns. Happy coding. – Roko C. Buljan Jun 03 '15 at 00:46
Awesome, I was wonder how can close the list after I have selected an option, and how can I integrate the code so that it can't work for any "customer select". Your code truly help me a lot. – Jason Jun 03 '15 at 00:53
1

@Jason if you want it to work almost exactly like a select box, you might want to close it even if a user clicks outside of it: http://jsbin.com/xugafe/3/edit >> the trick is by adding a transparent `:before` pseudo element that covers the whole screen. – Roko C. Buljan Jun 03 '15 at 01:02
1

I was using the solution from this page http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it to close the list when to click outside. Thank you for let me know the better way since I can get rip the jquery code which would reduce the complexity of my code. – Jason Jun 03 '15 at 01:10
@Jason I don't know what you're building this for exactly, but notice that if suddenly your custom select box ends (i.e.) at the bottom of the page, it will open-down ->> while a default browser/handled `select` element would open-upwards... Just for your consideration. (That is also easily fixable by some additional lines of jQ.) – Roko C. Buljan Jun 03 '15 at 01:13

Create a custom select box dropdown using jQuery

1 Answers1