我无法从通过 Ajax 创建的选择元素中设置值或获取值
Posted
技术标签:
【中文标题】我无法从通过 Ajax 创建的选择元素中设置值或获取值【英文标题】:I can't set value or get value from select elements created via Ajax 【发布时间】:2016-08-26 10:44:21 【问题描述】:我创建了“omarkasec”作为一个函数,我通过 ajax 从数据库中获取汽车品牌,并通过 ajax 在选择元素中添加了这个汽车品牌作为选项 --> 成功。 但我无法为这个选择元素设置值。
我试过这个代码来设置值:
-
$('select[name=marka]').val('Lada');
$('select[name=marka] option[value=Lada]').prop('selected', true);
$('select[name=marka] option[value=Lada]').attr('selected', 'selected');
此代码不起作用。但是如果我添加 alert("");在“omarkasec”函数中,代码确实有效,如果我删除警报(“”);代码不起作用。
<div id="marka" class="gizle" >
Marka: <br>
<select name="marka" onchange="omodelsec()" size="10" ></select>
</div>
<script language='javascript' type='text/javascript'>
function omarkasec()
$.ajax(
type: "POST",
url: "aracsor.php",
dataType: "json",
data:
otomobilmodelyili : $("select[name=modelyili]").val(), //This work, because i created php.
,
success: function(donen)
$("#marka").removeClass("gizle");
$("#model").addClass("gizle");
$("#yakit").addClass("gizle");
$("#sanziman").addClass("gizle");
$("#cekis").addClass("gizle");
$("#kasatipi").addClass("gizle");
$("select[name=marka]").empty();
$.each(donen, function (index, otomarka)
$("select[name=marka]").append($("<option>",
text : otomarka,
value : otomarka,
));
);
,
);
//if I add here alert(""); The following code works.
</script>
<script language='javascript' type='text/javascript'>
omarkasec();
$('select[name=marka]').val('Lada');
alert($('select[name=marka]').val()); //if I add alert(""); this code work but if I remove alert(""); this code get null value.
</script>
【问题讨论】:
尝试将您的代码放在$( document ).ready(function() //put code here );
之间您需要等待文档加载,然后才能找到元素和设置值
【参考方案1】:
Ajax 调用是异步的。您的代码执行了 $.ajax()
调用,并传递了一个回调函数,但该回调函数此时并未执行。
立即执行$.ajax()
之后的语句,但此时内容尚未加载。
但是,如果您执行alert()
,则最终可能会在警报对话框打开时触发回调,因此您的回调函数会加载内容。如果你随后关闭弹出窗口,任何跟随它的代码都会发现内容在那里。
解决这个问题的一种方法是使用$.ajax
调用的返回值,这是一个承诺,并将then
调用链接到它:
function omarkasec(oncomplete)
return $.ajax(
// ^^^^^^
type: "POST",
url: "aracsor.php",
dataType: "json",
data:
otomobilmodelyili : $("select[name=modelyili]").val(),
,
success: function(donen)
$("#marka").removeClass("gizle");
$("#model").addClass("gizle");
$("#yakit").addClass("gizle");
$("#sanziman").addClass("gizle");
$("#cekis").addClass("gizle");
$("#kasatipi").addClass("gizle");
$("select[name=marka]").empty();
$.each(donen, function (index, otomarka)
$("select[name=marka]").append($("<option>",
text : otomarka,
value : otomarka,
));
);
,
);
// provide (anonymous) callback function to the `then` method:
omarkasec.then(function ()
// this code will only be executed when content is loaded:
$('select[name=marka]').val('Lada');
alert($('select[name=marka]').val());
);
【讨论】:
感谢 noderman 和 trincot。以下代码解决了我的问题。omarkasec(function () // this code will only be executed when content is loaded: $('select[name=marka]').val('Lada'); alert($('select[name=marka]').val()); );
你的回答拯救了我的一天。谢谢!【参考方案2】:
你有一个竞争条件。您正在调用 omarkasec() 而不是等待它完成执行 select.val() 操作。当您添加警报时,它“起作用”,因为它为代码提供了一些额外的时间来完成 ajax 调用并填充值。当你提醒它时,这些值已经被填充了。
所有依赖于 ajax 调用结果的代码都必须在成功回调中。
【讨论】:
是的竞争条件 - 我最近发布了一个类似的问题。也许这里的简化示例将清楚地说明竞争条件? ***.com/questions/36949904/…以上是关于我无法从通过 Ajax 创建的选择元素中设置值或获取值的主要内容,如果未能解决你的问题,请参考以下文章
以编程方式在 material-ui Autocomplete TextField 中设置值