CODEWITHSUNDEEP
javascriptjquerycss
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

detect if html select dropdown is in dropdown selected state

I have HTML drop-downs;

Coded in the below format:

   <select name="State" id="State" class="required"/>
              <option value="">--Select State--</option>
              <option value="AK">Alaska</option>
   </select>

I have an error background image that appends to the <select> tag on error. But I would like to remove the background image, once the user has used the drop-down and has currently selected an available option.

So, when the drop down is open and any item is selected via <option> tag hide background image. I don't need help with hiding the background image per se'. Just the logic of detecting when an option has been selected.

I have tried starting with this logic

$('option:selected').css('background', 'none !important');

Here's the caveat you guys may be missing; if there is a scenario when the user toggles back to the default start state - eg in this case 'Select a State' this background image must reappear / restore.

Upvotes: 1

Views: 2627

Answers (4)

DinoMyte
DinoMyte

Reputation: 8858

To detect whether an option is selected or not, you can do the following:

   $('select').change(function()
    {
        if($(this)[0].selectedIndex == 0 && $(this).val() == "") // check if value is empty and index of the selected option is not zero.
           alert("not selected");
       else 
           alert("selected");
    });

Example : http://jsfiddle.net/WTkqn/300/

Upvotes: 0

csum
csum

Reputation: 1992

This will be fired when an option has been selected, assuming it is different from the currently selected option. It will not fire when the select menu is opened, though. You can probably use on 'click' for that.

$('select').on('change', function (e) {
    console.log("changed: ", this, e);
});

Upvotes: 0

Billy
Billy

Reputation: 154

Add a change event on the State dropdown. So whenever the value is not empty, it will hide the error message.

$('#State').change(function() {
    if(this.value !== '') {
        //hide error
        console.log('hide');
    } else {
        //show error
        console.log('show');
    }
});

Upvotes: 3

AtheistP3ace
AtheistP3ace

Reputation: 9691

I didn't use an image but its the same idea. I see you are applying styling directly to the element. I would recommend just using a class to apply the image and removing the class when you don't need the image any more:

Fiddle: http://jsfiddle.net/AtheistP3ace/oLrckqzj/

HTML:

<select name="State" id="State" class="required">
    <option value="">--Select State--</option>
    <option value="AK">Alaska</option>
</select>

JS:

var select = document.getElementById('State');
select.addEventListener('change',
    function () {
        if (this.value != '') {
            this.classList.remove('required');
        }
        else {
            this.classList.add('required');
        }
    }
);

Also you had this

<select name="State" id="State" class="required"/>

Which should be:

<select name="State" id="State" class="required">

And with jQuery: http://jsfiddle.net/AtheistP3ace/oLrckqzj/1/

var $select = $('#State');
$select.on('change',
    function () {
        var $this = $(this);
        if ($this.val() != '') {
            $this.removeClass('required');
        }
        else {
            $this.addClass('required');
        }
    }
);

Upvotes: 0

Related Questions