我有两个下拉列表，一个用于客户，一个用于客户的联系人。 当页面被加载时，我希望客户的主要联系人被选择，或者当用户选择不同的客户时。 下面是生成的html。
<select id="drContacto" name="drContacto" class="form-control valid" aria-invalid="false">
<option value="39">Remi</option>
<option value="40">Bob</option>
<option value="56">Marck</option>
<option value="71">Luck</option>
<option value="122">Zoe</option>
<option value="123">roberto</option>
<option value="124">jason</option>
</select>
这是我编写的jquery。
<script type="text/javascript">
$(document).ready(function () {
var clienteID = $('#drClient').val();
$.ajax({
url: '/ordenderecibo/FillContactos',
type: "GET",
dataType: "JSON",
data: { ID: clienteID },
success: function (cities) {
$("#drContacto").html(""); // clear before appending new list
$.each(cities, function (i, contactos) {
$("#drContacto").append(
$('<option></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
});
$("#drContacto option[value=" + @Model.contrato.contacto_id + "]").prop("selected", true);
}
});
});
function FillContactos() {
var clienteID = $('#drClient').val();
$.ajax({
url: '/ordenderecibo/FillContactos',
type: "GET",
dataType: "JSON",
data: { ID: clienteID },
success: function (cities) {
$("#drContacto").html(""); // clear before appending new list
$.each(cities, function (i, contactos) {
$("#drContacto").append(
$('<option></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
});
$("#drContacto option[value=" + @Model.contrato.contacto_id + "]").prop("selected", true);
}
});
}
</script>
让我们这么说吧
@Model.contrato.contacto_id = 56
我希望它像这样被选中
<select id="drContacto" name="drContacto" class="form-control valid" aria-invalid="false">
<option value="39">Remi</option>
<option value="40">Bob</option>
<option value="56" selected="selected">Marck</option>
<option value="71">Luck</option>
<option value="122">Zoe</option>
<option value="123">roberto</option>
<option value="124">jason</option>
</select>
然而，事实并非如此，我不明白为什么。 如有任何帮助，我们将不胜感激。 谢谢。
由于ajax调用是异步的，这意味着在返回请求结果之前对代码进行了评估，因此ajax可能仍然没有找到应用所选选项的位置。一种使此工作的方法是，当您在那里追加选项时，只将selected值应用到选项。即:您的ajax成功如下所示:
$.each(cities, function(i, contactos) {
//check with the value if same
if (@Model.contrato.contacto_id == contactos.contacto_id) {
//add selected to option
$("#drContacto").append($('<option selected="selected"></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
} else {
$("#drContacto").append($('<option></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
}
});
演示代码:
null
var cities = [{
"contacto_id": "1",
"nombre_contacto": "a"
}, {
"contacto_id": "2",
"nombre_contacto": "b"
}, {
"contacto_id": "3",
"nombre_contacto": "c"
}];
var values = 2;
$.each(cities, function(i, contactos) {
//compare values if same
if (values == contactos.contacto_id) {
//add selected to that option
$("#drContacto").append($('<option selected="selected"></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
} else {
$("#drContacto").append($('<option></option>').val(contactos.contacto_id).html(contactos.nombre_contacto));
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="drContacto" name="drContacto" class="form-control valid" aria-invalid="false">
</select>
尝试设置动态选项的值，而不是设置选项的val。
使用这个
null
$('<option value="'+contactos.contracto_id+'"></option>')