Custom select in jQuery

Question

on my site i want to do a custom select. On click i want to slideDown a div, which have some filters. Structure:

<div class="select" style="position:relative;height:20px;">
   <span class="label">somelabel</span>
   <div style="display:none;position:absolute;top:20px;left:0;" class="select_inner">
      <label for="something">
         <input type="text" name="something">
      </label>
      <label for="something">
         <input type="text" name="something">
      </label>
   </div>
</div>

Div with class select_inner is hidden, i want to show it when somebody click on span width class label. And hide when somebody click on everything else except div with class select_inner. And thats the problem... I try something like this:

$('.select').click(function(){
   var select = $('.select_inner', this);
   select.slideDown();
   $(this).parents().click(function(){
      select.slideUp();
   });
});

And it works but wrong. When i click on my div, child div slides down and instantly up...

edsk · Accepted Answer · 2012-03-16 13:10:36Z

1

Try

$('.select span.label').click(function(){
    $('.select_inner').slideToggle("fast");
});

answered Mar 16, 2012 at 13:10

edsk

581 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rondel · Accepted Answer · 2012-03-16 20:06:33Z

0

You can do this:

$('.select').click(function(event){
event.stopPropagation();
var select = $('.select_inner', this);
select.slideDown();

});

$('html').click(function() {
 var select = $('.select_inner', this);
 select.slideUp();
});

See this jsfiddle. The way it works is that on any click outside of the select div, it attempts to slide up the div, but if you click on the select div, it will stop the event and do a slideDown instead.

EDIT

I made a mistake in the initial script. I updated the script above to fix the problem. See the updated fiddle in IE and Firefox: http://jsfiddle.net/A6ZNY/1/

edited Mar 16, 2012 at 20:06

answered Mar 16, 2012 at 13:15

Rondel

5,02111 gold badges45 silver badges71 bronze badges

2 Comments

Rondel Over a year ago

No problem. Don't forget to mark it as the correct answer by selecting the tick mark next to the answer.

Rondel Over a year ago

See the updated script. I forgot to pass in the event in the function. This one will work in IE and Firefox

Collectives™ on Stack Overflow

Custom select in jQuery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related