Jquery selected select by value

Question

i want to add a selected, if my Model.StartYear is the same as the value of the option.

my select:

<select name="year" class="form-control holidaySelect">
                <option value="2015">2015/2016</option>
                <option value="2016">2016/2017</option>
                <option value="2017">2017/2018</option>
                <option value="2018">2018/2019</option>
                <option value="2019">2019/2020</option>
            </select>

my jquery:

<script type="text/javascript">
$(document).ready(function () {
    var num = @Model.StartYear;
    $(".holidaySelect option").each(function () {
        if ($(this).val() == num) { // EDITED THIS LINE
            $(this).attr("selected", "selected");
        }
    });
});

Model.StartYear contains the selected value of the option. So that should be matched to the option.

Can't seem to get it to work properly.

Answer 1

You can directly use .val(value)

$(document).ready(function () {
    $(".holidaySelect").val(@Model.StartYear)
});

 jQuery(document).ready(function () { $(".holidaySelect").val(2018) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="year" class="form-control holidaySelect"> <option value="2015">2015/2016</option> <option value="2016">2016/2017</option> <option value="2017">2017/2018</option> <option value="2018">2018/2019</option> <option value="2019">2019/2020</option> </select> 

Answer 2

Your code works when @Model.StartYear is not empty value. Here you can see working fiddle for 2017 value

 $(document).ready(function () { var num = 2017; $(".holidaySelect option").each(function (key) { if ($(this).val() == num) { // EDITED THIS LINE $(this).attr("selected", "selected"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="year" class="form-control holidaySelect"> <option value="2015">2015/2016</option> <option value="2016">2016/2017</option> <option value="2017">2017/2018</option> <option value="2018">2018/2019</option> <option value="2019">2019/2020</option> </select>