我使用 jQuery + Ajax 检索 URL，并根据某些选择选项确定显示。
选择工作正常，但我无法设置默认值。我希望在加载页面时预先选择 value="3" 并显示相应的结果，而无需之前选择任何选项。
我该怎么做？
到目前为止，这是我的代码：
$(document).ready(function() {
$("#reportMonth").on('change', function() {
var reportMonth = $('#reportMonth :selected').val();
if(reportMonth){
$.ajax({
type: "GET",
url: "https://api.tools.paeddy.de/server_info",
dataType: "json",
timeout: 15000,
})
.done(function(JSONOut) {
var out = "Server " + JSONOut[reportMonth].server + " = " + JSONOut[reportMonth].status;
$('#output').html(out);
})
.fail(function(xhr, status, error) {
$('#output').html("<div class='error'>Error: " + xhr.status + ' - ' + error + "</div>");
});
$('#show_output').html('<div id="output"></div>');
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<form>
<select id="reportMonth" name="reportMonth">
<option value="">Select:</option>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
</select>
</form>
<div id="show_output"></div>
</body>
</html>看起来您正在寻找selected属性。您还需要运行 AJAX 代码来获取默认值的结果，因此将您的 onchange 处理程序提取到一个函数中，然后在 onready 处理程序中调用它。像这样：
function getResult() {
var reportMonth = $('#reportMonth :selected').val();
if (reportMonth) {
$.ajax({
type: "GET",
url: "https://api.tools.paeddy.de/server_info",
dataType: "json",
timeout: 15000,
})
.done(function(JSONOut) {
var out = "Server " + JSONOut[reportMonth].server + " = " + JSONOut[reportMonth].status;
$('#output').html(out);
})
.fail(function(xhr, status, error) {
$('#output').html("<div class='error'>Error: " + xhr.status + ' - ' + error + "</div>");
});
$('#show_output').html('<div id="output"></div>');
}
}
$(document).ready(function() {
getResult();
$("#reportMonth").on('change', getResult);
});<!DOCTYPE html>
<html>
<body>
<form>
<select id="reportMonth" name="reportMonth">
<option value="">Select:</option>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3" selected>4</option>
</select>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="show_output"></div>
</body>
</html>$(document).ready(function() {
setTimeout(function() {
$("#reportMonth").trigger('change');
});
$("#reportMonth").on('change', function() {
var reportMonth = $('#reportMonth :selected').val();
if(reportMonth){
$.ajax({
type: "GET",
url: "https://api.tools.paeddy.de/server_info",
dataType: "json",
timeout: 15000,
})
.done(function(JSONOut) {
var out = "Server " + JSONOut[reportMonth].server + " = " + JSONOut[reportMonth].status;
$('#output').html(out);
})
.fail(function(xhr, status, error) {
$('#output').html("<div class='error'>Error: " + xhr.status + ' - ' + error + "</div>");
});
$('#show_output').html('<div id="output"></div>');
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<form>
<select id="reportMonth" name="reportMonth">
<option value="">Select:</option>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3" selected="selected">4</option>
</select>
</form>
<div id="show_output"></div>
</body>
</html>