如果以前有人问过这个问题，我很抱歉，但是我找不到一个适合我的特定代码的答案。
我有一个动态的客户下拉列表。 当选择客户时，它将填充客户联系人。 一切都很顺利。 但是，它将第一个选项与来自数据库的第一个值放在一起，并且我希望它是空白的，以迫使人们选择正确的联系人。
下面是我的代码:
$('select[name="customer"]').on('change', function(){
var customerId = $(this).val();
if(customerId) {
$.ajax({
url: '/customer/contacts/get/'+customerId,
type:"GET",
dataType:"json",
beforeSend: function(){
$('#loader').css("visibility", "visible");
},
success:function(data) {
$('select[name="customer_contact"]').empty();
$.each(data, function(key, value){
$('select[name="customer_contact"]').append('<option value="'+ key +'">' + value + '</option>');
});
},
complete: function(){
$('#loader').css("visibility", "hidden");
}
});
} else {
$('select[name="customer_contact"]').empty();
}
});
下面是客户填充的选择:
<select
name="customer_contact"
class="form-control shadow">
<option>
</option>
</select>
我认为在从数据库中追加数据之前，基本上可以添加一个空白值或“选择联系人”选项。 因为我现在无法重新创建这个片段。 我建议您尝试添加以下代码
$('select[name="customer_contact"]').append('<option value="Choose">Choose Contact</option>');
因此您的完整代码如下所示
$('select[name="customer"]').on('change', function(){
var customerId = $(this).val();
if(customerId) {
$.ajax({
url: '/customer/contacts/get/'+customerId,
type:"GET",
dataType:"json",
beforeSend: function(){
$('#loader').css("visibility", "visible");
},
success:function(data) {
$('select[name="customer_contact"]').empty();
$('select[name="customer_contact"]').append('<option value="Choose">Choose Contact</option>');
$.each(data, function(key, value){
$('select[name="customer_contact"]').append('<option value="'+ key +'">' + value + '</option>');
});
},
complete: function(){
$('#loader').css("visibility", "hidden");
}
});
} else {
$('select[name="customer_contact"]').empty();
}
});
您的代码只是将新选项追加到现有的select中，因此如果您先将空白选项放在那里，它仍然可用:
<select
name="customer_contact"
class="form-control shadow">
<option value="" selected>Please select...</option>
</select>
