set select value on page load/reload

Question

I want to change the select component value on page load. I read the related post and every solution presented there works for a button click. However, what I would like to have, is value set after the page is loaded, without any user action. What I have is:

<script>
$(document).ready(function(){
    $("div.id_100").val("March").change();
    alert("ready!");
});
</script>

and:

<div class="id_100">
    <select class="form-control">
        <option  th:text="January">January</option>
        <option  th:text="February">February</option>
        <option  th:text="March">March</option>
    </select>
</div>

I have the same piece of code attached to a button, and it works. It just doesn't work for ready() function. So my question is: how to set select value after the page is loaded?

$( "#button1" ).click(function() {
    $("div.id_100").val("March").change();  
});

Full html

<head>
<title>Wszystkie Delegacje</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="../static/css/blog.css" th:href="@{/css/blog.css}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script th:src="@{/js/triptable.js}"></script>



<link
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css"
    rel="stylesheet" />

<style type="text/css">
.pull-right {
    float: right !important;
    color: green;
}

@media ( min-width : 1600px) {
    .container {
        max-width: 2000px;
    }
}
</style>
</head>
<body>

<div layout:fragment="content">

<div class="container">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>

<a class="btn btn-md btn-info" id="button1">miech</a>


<div class="id_100">
    <select class="form-control">
    <option  th:text="January">January</option>
    <option  th:text="February">February</option>
    <option  th:text="March">March</option>                 
    </select>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>

$(document).ready(function(){

    $("div.id_100 select").val("March").change();

    alert("ready!");


});

$( "#button1" ).click(function() {


    $("div.id_100").val("March").change();


});

</script>
</body>
</html>

nope. I have tried all solutions - all of them work for click, none work for reload — jarosik, Jan 23 '17 at 11:18

score 2 · Answer 1 · answered Jan 23 '17 at 11:26

The issue with the code is that you are trying to set the value for div. Not for the select tag.

This is the actual solution.

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("div.id_100 select").val("March");
        });
    </script>
</head>

<body>

    <div class="id_100">
        <select class="form-control">
            <option th:text="January">January</option>
            <option th:text="February">February</option>
            <option th:text="March">March</option>
        </select>
    </div>

</body>

</html>

Please copy paste this code in an HTML file and test. Works fine for me. — Nitheesh, Jan 23 '17 at 11:47

score 1 · Answer 2 · answered Jan 23 '17 at 11:22

First of all your selector selects div, not select itself.

Than you need value="" in option to select value other than it's name.

$(document).ready(function(){
    $("div.id_100 select").val("mar").change();
    alert("ready! "+ $("div.id_100 select").val());
});

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

<div class="id_100">
    <select class="form-control">
        <option value="jan" th:text="January">January</option>
        <option value="feb" th:text="February">February</option>
        <option value="mar" th:text="March">March</option>
    </select>
</div>

You can use full value text as text too:

$(document).ready(function(){
    $("div.id_100 select").val("March").change();
    alert("ready! "+ $("div.id_100 select").val());
});

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

<div class="id_100">
    <select class="form-control">
        <option th:text="January">January</option>
        <option th:text="February">February</option>
        <option th:text="March">March</option>
    </select>
</div>

Alternatively you can add selected="selected" to option:

    <div class="id_100">
        <select class="form-control">
            <option value="jan" th:text="January">January</option>
            <option value="feb" th:text="February">February</option>
            <option value="mar" th:text="March" selected="selected">March</option>
        </select>
    </div>

score 1 · Answer 3 · answered Jan 23 '17 at 11:22

1

You have to select the <select> node and then force the value. :

See Example:

$(document).ready(function() {
  $("div.id_100 select").val("February").change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="id_100">
  <select class="form-control">
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
  </select>
</div>

answered Jan 23 '17 at 11:22

Iceman

6,035
2
23
34

@jarosik just test on an html page right now. It worked. – Iceman Jan 23 '17 at 11:47
@jarosik I just ran your exact full html on my machine, and it worked perfectly. – Iceman Jan 23 '17 at 11:48

Satpal · Answer 4 · 2017-01-23T11:35:15.160

For reload you need to persist changed value. localStorage can be used

//Your selector was wrong use descendant selector
var element = $("div.id_100 select");

//Bind change event to persist the changed value
element.on('change', function() {
    localStorage.setItem('id_100_select_value', $(this).val());
});

//If data exists in localStorage the value will be ser
//Otherwise set default data   
element.val(localStorage.getItem('id_100_select_value') || "March");

Fiddle

set select value on page load/reload

4 Answers4