ani_css ani_css - 2 months ago 6
jQuery Question

if option is not selected statement

I have dropdown select and options like this:

<div class="input-field">
<span class="icon-area"></span>
<select>
<option value="0">list 0</option>
<option value="1">list 2</option>
<option value="2">list 3</option>
</select>




and if list 0 is not selected I want to add css style it but my js code doesn't work

$("select").blur(function() {
$(this).parents(".input-field").removeClass("form-border");
$(this).parents(".input-field").find(".icon-area").removeClass("form-background");

if(this.value){
$(this).parents(".input-field").addClass("form-border");
$(this).parents(".input-field").find(".icon-area").addClass("form-background");
return false;
}else{
$(this).parents(".input-field").removeClass("form-border");
$(this).parents(".input-field").find(".icon-area").removeClass("form-background");
return false;
}
});


what is wrong ?

Answer

try replacing with this:

$("select").change(function() {
        $(this).parents(".input-field").removeClass("form-border");
        $(this).parents(".input-field").find(".icon-area").removeClass("form-background");

        if(this.value==0){
            $(this).parents(".input-field").addClass("form-border");
            $(this).parents(".input-field").find(".icon-area").addClass("form-background");
            return false;
        }else{
            $(this).parents(".input-field").removeClass("form-border");
            $(this).parents(".input-field").find(".icon-area").removeClass("form-background");
            return false;
        }
    });