Question

我想在页面加载时更改选择组件值。我阅读了related post，其中提供的每个解决方案都适用于单击按钮。但是，我希望拥有的是在加载页面后设置的值，而无需任何用户操作。我所拥有的是：

<script>
$(document).ready(function(){
    $("div.id_100").val("March").change();
    alert("ready!");
});
</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>

我将相同的代码附加到按钮上，它可以正常工作。它只适用于ready（）函数。所以我的问题是：如何在页面加载后设置选择值？

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

完整的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>

Answer 1

首先，你的选择器选择div，而不是选择它自己。

您需要value=""中的option来选择除其名称之外的值。

$(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>

您也可以将全值文字用作文字：

$(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>

或者，您可以将selected="selected"添加到选项：

    <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>

Answer 2

您必须选择<select>节点，然后强制该值。：

参见示例：

$(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>

Answer 3

对于重新加载，您需要保留更改的值。可以使用localStorage

//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

Answer 4

代码的问题在于您正在尝试设置div的值。不适用于选择标签。

这是实际的解决方案。

＆＃13;

<!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>

＆＃13;

在页面加载/重新加载时设置选择值

4 个答案: