1

I am removing a class from a select element when the select element is clicked via a jQuery mousedown event. How can i re-add this class once the select menu closes?

JSFiddle http://jsfiddle.net/YvCHW/4274/

$("select.desired").mousedown(function(){
    $(this).removeClass('desired');
});
select {
   margin: 30px 10px;
    border: 1px solid #111;
   background: transparent;
   border: 1px solid #ccc;
   padding: 5px 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
} 
select.desired {
    font-size: 30px;
    color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="desired">
    <option>Apples</option>
    <option  class="selected" selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>

3
  • 1
    I dont think you can check if a select is open or closed, you could do it with a custom made select
    – Jacob G
    Jan 6, 2015 at 20:50
  • jsfiddle.net/YvCHW/4275 working but very buggy
    – sodawillow
    Jan 6, 2015 at 20:53
  • I'm still trying to come up with a decent solution for this. Everything i tried is very buggy. I wish JS was my strong point. I'll be impressed with the brain that fixes this issue.
    – user1320260
    Jan 6, 2015 at 21:22

5 Answers 5

0

stupid enough to work:

$('.special').on('mousedown', function(){
        $(this).toggleClass('some');
    })
    .on('mouseup', function(){
        $(this).toggleClass('some');
    })
    .on('click', function(){
        $(this).toggleClass('some');
    });
2
  • 1
    It's very likely that either a different element could be clicked to close it, or that a different event will take place. Jan 6, 2015 at 20:55
  • 1
    The class is not added if the user click outside of the select element to close it.
    – user1320260
    Jan 6, 2015 at 20:58
0

Would a focus-lost event handler help?

$("select.desired").focusout(function(){
    $(this).addClass('desired');
});

It seems to work on JSFiddle (with a little lag for some reason...)

0

You might want to try focus and blur/change.

$("select.desired").on("blur change focus", function (evt){
    $(this).toggleClass('desired', evt.type!=="focus");
    //if (evt.type==="change") $(this).blur();
});
select {
   margin: 30px 10px;
    border: 1px solid #111;
   background: transparent;
   border: 1px solid #ccc;
   padding: 5px 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
} 
select.desired {
    font-size: 30px;
    color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="desired">
    <option>Apples</option>
    <option  class="selected" selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>

4
  • This is very close. The only issue is, if the user clicks outside of the select to close the options the select still remains as focus. It requres a double click to lose focus.
    – user1320260
    Jan 6, 2015 at 21:00
  • Made a change, by adding change. Jan 6, 2015 at 21:01
  • Thanks but the class is never removed once it has be re-added. Also the class isn't added once the options are closed via the user clicking outside of the options.
    – user1320260
    Jan 6, 2015 at 21:05
  • HUH? The select gets small when in focus and gets big once a selection is made or clicked outside. Not sure what is missing... It is a little buggy with change because the focus is still there. The commented out line, if enabled cleans that up. Jan 6, 2015 at 21:07
0

jsFiddle Demo

There is a lot going on with the select element. When you use click, it doesn't register on the options, you cannot attach a click event to an option, and if you place a mouseup handler on the select but the mousedown handler changes the select to be too small, the mouseup never fires because the element changes places.

More than that, the state of the select element can change based on its focus, selection, or actual change. It can be changed or it can remain the same after a selection. All of these noted conditions lead to a rather complex event handling. I placed all of the logic into a jQuery extension format, so that it can be used as simply as

$('select.desired').selectToggle('desired');

Here is the extension itself

$.fn.selectToggle = function(className){
 var 
  skip = false,
  prev = true, 
  $select = this.change(function(){
   $select.addClass(className);       
  }).blur(function(){
  if( !skip ){
   $select.addClass(className);
   prev = true;
  }
 });
 this.wrap("<span>").mousedown(function(){
  $select.toggleClass(className);
  skip = true;
  $select.blur().focus();
  skip = false;
 }).click(function(){
  if( prev == $select.hasClass(className)){
   $select.blur().focus();
  }else{
   prev = $select.hasClass(className);
  }
 });  
};

And here is a stack snippet demo showing the extension at work with the given problem in this question

$.fn.selectToggle = function(className){
 var 
  skip = false,
  prev = true, 
  $select = this.change(function(){
   $select.addClass(className);       
  }).blur(function(){
  if( !skip ){
   $select.addClass(className);
   prev = true;
  }
 });
 this.wrap("<span>").mousedown(function(){
  $select.toggleClass(className);
  skip = true;
  $select.blur().focus();
  skip = false;
 }).click(function(){
  if( prev == $select.hasClass(className)){
   $select.blur().focus();
  }else{
   prev = $select.hasClass(className);
  }
 });  
};
$('select.desired').selectToggle('desired');
select {
   margin: 30px 10px;
    border: 1px solid #111;
   background: transparent;
   border: 1px solid #ccc;
   padding: 5px 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
} 
select.desired {
    font-size: 30px;
    color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click an option:<select class="desired">
    <option>Apples</option>
    <option  class="selected" selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>

1
  • Thanks a lot, this is very close. The only problem seems to be when the user does not change an option, the class is not added unless the user clicks twice on the page to remove the focus. It's this part that has got me stumped. I've tried to add a blur in various instances but can't get anything to work.
    – user1320260
    Jan 7, 2015 at 8:31
-1

http://jsfiddle.net/YvCHW/4276/

$("select.desired").click(function(){
    $(this).toggleClass('desired');

});
1
  • This does not add the class when the user clicks outside of the options to close the select.
    – user1320260
    Jan 6, 2015 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.