在頁面加載/重新加載時設置選擇值

我想在加載頁面時更改選擇組件值。我閱讀了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

在頁面加載/重新加載時設置選擇值

回答

相關問題