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

我想在加载页面时更改选择组件值。我阅读了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>

来源

2017-01-23 jarosik

都能跟得上。我已经尝试了所有的解决方案 - 所有这些对点击工作了一下，没有工作重装 – jarosik

首先你选择的选择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>

来源

2017-01-23 11:22:30 Justinas

作品，对于重载的点击不起作用 – jarosik

你必须选择<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>

来源

2017-01-23 11:22:52 Iceman

作品，为重装 – jarosik

@jarosik不工作只是一个HTML页面上的测试，现在。有效。 – Iceman

@jarosik我刚刚在我的机器上运行了完整的html，并且工作完美。 – Iceman

对于重载你需要坚持改变值。 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

来源

2017-01-23 11:24:44 Satpal

与代码的问题是，您要设置DIV值。不适用于选择标签。

这是实际的解决方案。

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

来源

2017-01-23 11:26:17 Nitheesh

作品点击，不适合重载工作 – jarosik

请复制粘贴到HTML文件和测试该代码。对我来说工作得很好。 – Nitheesh

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

回答

相关问题