Using jQuery to remove class from a select field when it has an option selected

Question

I have combed through multiple StackOverflow posts and haven't found the right syntax for what I'm looking for. I think I'm close, but need some help. Here's the situation:

I have a form with regular text and select fields that are styled differently based on whether the field has been filled out or not.

I've purposely not added something like Chosen or jQuery UI to rip apart the select field and rebuild with normal elements. Trying to keep things clean and small. All styling is done with CSS.

Currently I am adding a class to my select fields on load and then removing that class when someone interacts with the select field:

$(".infield select").addClass('default-value');

$("select").bind("focus", function () {
$(this).removeClass('default-value');
});

This works great, but my issue is that we are using cookies to prepopulate some of the form fields if they've filled out a form on the site previously. The above code only kicks in if they interact with the field.

I need something to remove my "default-value" class if the page loads and the select field has something selected. Here's my latest try, but it's not working.

$("select option:selected").on(function() {
    $(this).parent().removeClass("default-value");
});

Also for reference here's the basic select field code:

$(".infield select").addClass('default-value');

$(".infield select option:selected").on(function() {
	$(this).parent().removeClass("default-value");
});	
	

$(".infield select").bind("focus", function () {
  $(this).children('option[value="defaultValue"]').remove();
  $(this).removeClass('default-value');
});

form {
  background-color: #EFF2F4;
  padding: 5%;
  }

.infield select {
	font: bold 1.1em "source-sans-pro", Helvetica, Helvetica;
	border: none;
	border-left: 4px solid #BCC2C8;
	padding: .5em;
	width: 100%;
	color: #808080;
	-webkit-box-sizing: border-box; 
	     -moz-box-sizing: border-box; 
	          box-sizing: border-box;
	border-radius: 0px;  
	border-radius: 0px !important;
	background: url(/images/uploads/design-assets/select-arrow.png) right center no-repeat;
	background-size: 21px;
	-webkit-border-radius: 0px;
	-webkit-appearance: none;
	background-color: #fff;
	-webkit-border-radius: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	  appearance: none;
	border-right: 10px solid #fff;
}

.infield select.default-value {
	color: #99acb9;
	font-weight: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="infield">

<select id="billing_state" name="billing_state">
       <option value="">State</option>
       <option selected="selected" value="AL">AL</option>
       <option value="AK">AK</option>
    </select>
  
 </form>

What am I missing?

dfsq · Accepted Answer · 2015-09-08 20:25:39Z

2

You need to filter selects with selected value not equal to defaultValue. Something like this:

$(".infield select").filter(function () {
    return $(this).val() !== "";
}).removeClass("default-value");

But better to add default-value class only to those selects which has defaultValue option selected in the first place.

Check the demo below.

$(".infield select").filter(function () {
    return $(this).val() === "";
}).addClass("default-value");

$(".infield select").bind("focus", function () {
    $(this).children('option[value="defaultValue"]').remove();
    $(this).removeClass('default-value');
});

form {
    background-color: #EFF2F4;
    padding: 5%;
}
.infield select {
    font: bold 1.1em"source-sans-pro", Helvetica, Helvetica;
    border: none;
    border-left: 4px solid #BCC2C8;
    padding: .5em;
    width: 100%;
    color: #808080;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0px;
    border-radius: 0px !important;
    background: url(/images/uploads/design-assets/select-arrow.png) right center no-repeat;
    background-size: 21px;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    background-color: #fff;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-right: 10px solid #fff;
}
.infield select.default-value {
    color: #99acb9;
    font-weight: normal;
}

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

<form action="" class="infield">
    <select id="billing_state" name="billing_state">
        <option value="">State</option>
        <option selected="selected" value="AL">AL</option>
        <option value="AK">AK</option>
    </select>
</form>

edited Sep 8, 2015 at 20:25

answered Sep 8, 2015 at 20:19

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

FortySeven Media Over a year ago

I can't have a value in the initial option or else the form sees it as being filled out and doesn't kick errors back if it's required. This has been my issue. I just need check based on an empty value, not a specific one.

dfsq Over a year ago

No problem, just use $(this).val() !== ""; then.

FortySeven Media Over a year ago

Bingo, that's it. Thank you!

vanmeter-t · Accepted Answer · 2015-09-08 20:13:51Z

1

$(".infield select option:selected").on(function() {

This statement isn't doing anything. For .on you need to specify an event.

.on( events [, selector ] [, data ], handler ) ~ http://api.jquery.com/on/

Can't you do something like the following:

$(document).ready(function(){
    if($(".infield select option:selected").length > 0){
      $(".infield select").removeClass("default-value");
    }
});

The code above would check if any options are selected after the document has loaded and if at least one is selected, it will remove the class.

answered Sep 8, 2015 at 20:13

vanmeter-t

638 bronze badges

2 Comments

FortySeven Media Over a year ago

This is closer, but it's still removing the class from select fields that have an option selected with an empty value (i.e. the first option in the select list). It needs to leave it for fields that don't have a value selected so there's a visual cue that they need to do something.

vanmeter-t Over a year ago

I see, it looks like the answer below handles that case as well.

Marcelo Agimóvel · Accepted Answer · 2017-02-09 04:17:22Z

0

In case someone having a similar problem, in my case the problem was the ', check this out:

Don't work select field, but work's on textboxes!

$('#<?echo $campo_logradouros;?>').removeClass('hidden');

It work's on select fields:

$('#<?echo $campo_logradouros;?>').removeClass("hidden");

I mean, how crazy is that?

answered Feb 9, 2017 at 4:17

Marcelo Agimóvel

1,7292 gold badges23 silver badges27 bronze badges

Collectives™ on Stack Overflow

Using jQuery to remove class from a select field when it has an option selected

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related