check if dropdown's first option has selected attribute

Question

I have created a dropdown listing last 5 years from current year, current year being selected explicitly. Here is my code:

var nDate = new Date();
    var year = nDate.getFullYear();
    $('#yearddl').append('<option value>Select Year</option>');
    for (var i = 0; i <= 4; i++) {
        if (i == 0) {
            $('#yearddl').append('<option selected value =' + year + '>' + year + '</option>');
        }
        else {
            $('#yearddl').append('<option value =' + year + '>' + year + '</option>');
        }

        year = year - 1;
    }

Now, my requirement is that how can I check that whether first option, which would in any case be the current year, has selected attribute. Basically, I want to remove selected option from here and give it to some other option.

why you are adding `select year` do not add that. :P By default `Current Year` will be selected . ;) — Kaushik, Jan 05 '16 at 08:22
@JoëlSalamin Well, I don't have the knowledge of `:selected` pseudo selector, and yes, the answer was very straight forward. Besides this, it was just a part of what I was doing — Amit Kaushal, Jan 05 '16 at 09:42

Rayon · Answer 1 · 2016-01-05T08:14:41.670

2

Do not keep selected attribute while creating options. Once the options are generated, you can use $('#yearddl option[value='+nDate.getFullYear()+']') selector to set the selected property.

Try this:

var nDate = new Date();
var year = nDate.getFullYear();
$('#yearddl').append('<option value>Select Year</option>');
for (var i = 0; i <= 4; i++) {
    $('#yearddl').append('<option value =' + year + '>' + year + '</option>');
  year = year - 1;
}
$('#yearddl option[value='+nDate.getFullYear()+']').prop('selected',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id='yearddl'>
  <option value='2099' selected>2099</option>
</select>

Fiddle here

edited Jan 05 '16 at 08:14

answered Jan 05 '16 at 07:45

Rayon

36,219
4
49
76

but I need current year selected initially on page load – Amit Kaushal Jan 05 '16 at 07:48
Note: `selected` attribute should be removed from the previously selected option (in more real life example). – Luke Jan 05 '16 at 08:29
@RayonDabre I meant that if you'd like to programmatically select one option and then select another you should remove `selected` attribute from previously selected option first. – Luke Jan 05 '16 at 08:36
@RayonDabre Isn't it the same thing that you are using `.prop()` method and put `selected` as the attribute. As with your method also you are adding an attribute to current year option. Also what I was searching for is the answer given by nemesis_sun. – Amit Kaushal Jan 05 '16 at 09:56
1

@AmitKaushal, [__It is not the same thing__](http://stackoverflow.com/questions/5874652/prop-vs-attr) Also note that, If _current_ year is not the `2nd` child in the options list then other answer will not work as it is based on the index of the `option`. Mine is based on the value of the `option` which will work irrespective of the index of the option.. – Rayon Jan 05 '16 at 10:00
@RayonDabre Yes, you are right. Initially I thought the other way of doing the stuff in which I have to find the index. Your's is also correct. I was not able to think your way – Amit Kaushal Jan 05 '16 at 10:56

nhd · Accepted Answer · 2016-01-05T08:17:50.787

2

$('#yearddl option:nth-child(2)').is(":selected")

edited Jan 05 '16 at 08:17

answered Jan 05 '16 at 07:47

nhd

141
3

Almost there, but `first-child` will select `` – Rayon Jan 05 '16 at 08:15
2

Sorry for the carelessness, edited to take the second option. – nhd Jan 05 '16 at 08:18
`is(':selected')` is used for whether it(option) is selected or not. for saying selected you can use `prop` or `attr` – Kaushik Jan 05 '16 at 08:25

check if dropdown's first option has selected attribute

2 Answers2