AJAX加載選擇，按值選擇選項
[英]AJAX loaded select, select option by value
問題描述
如果選擇是通過 AJAX 加載的，如何按值選擇選項
索引.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="data"></div>
</body>
<script>
function LoadSelect() {
var post_data = {
token: "test"
};
$.ajax({
type: 'POST',
url: 'load_select.php',
data: post_data,
dataType: "json",
beforeSend: function() {},
success: function(data) {
$("#data").html(data["msg"]);
},
complete: function() {}
});
}
$(document).ready(function() {
LoadSelect();
});
</script>
</html>
load_select.php
<?php
// Value from the database
$gender = "female";
$html = '
<select class="form-control" id="gender" name="gender">
<option value="female">Female</option>
<option value="male">Male</option>
</select>
<script>
$("#gender").val("'.$gender.'");
</script>
';
echo json_encode(array('msg' => $html));
試過這段代碼，但它不起作用。
問題解決了，$gender 變量從數據庫中得到了錯誤的值，比如“f”而不是“female”。
2 個解決方案
解決方案1
0 2019-07-25 07:59:49
如果我理解正確，那么您將使用 ajax 請求中的 html 覆蓋選擇。 為了保持該值，您需要存儲原始值，然后覆蓋 html，然后恢復原始值。 請參閱下面的這個片段。
最好不要使用 ajax 調用覆蓋 html 元素，而只更新需要更新的信息。
$("#gender").val("male"); //Lets pretend this onclick handler is your ajax succes handler. $('#MimicAjax').on('click', function(){ //Fake ajax result for demonstraion purpose var ajaxResult = '<select class="form-control" id="gender" name="gender"><option value="female">Female</option><option value="male">Male</option></select>'; //store the original value var originalValue = $("#gender").val(); //Do your ajax thingy $('#data').html(ajaxResult); //restore original value $("#gender").val(originalValue); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="data"> <select class="form-control" id="gender" name="gender"> <option value="female">Female</option> <option value="male">Male</option> </select> </div> <button id="MimicAjax">MimicAjax</button>
如果您只想在使用 ajax 添加 html 后設置該值，則只需在更改 html 后在 succes 處理程序中使用該行。
$.ajax({
type: 'POST',
url: 'src/ajax/load_select.php',
data: post_data,
dataType: "json",
beforeSend: function() {},
success: function(data) {
$("#data").html(data["msg"]);
$("#gender").val("male");
},
complete: function() {
}
});
解決方案2
0 2019-07-25 08:01:34
通常，通過代碼更改選擇的值后應觸發更改事件，如下所示$("#gender").trigger('change');
獲取使用AJAX加載的select的值
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.