在用区填充块之前添加一个nil值，以此类推

Question

我有一个代码填充块当区被选中。

但是，我想添加这个

<option value=''>Select</option>

在用值

填充块之前: -

选择地区前

District
<option>Dist 1</option>
<option>Dist 2</option>
<option>Dist 3</option>
<option>Dist 4</option>
Block
<option>Select District First</option>

选择区域后

District
<option>Dist 2</option>
//Other District options are available here
Block
<option>Select Block</option>  //I want to add this option
<option>Block 1 for District 2</option>
<option>Block 2 for District 2</option>
<option>Block 3 for District 2</option>

因此，当用户从Ajax发送的数据列表中选择一个不同的块时，将会有一个空白选项。一旦更改了块，其他选项(与块的onchange相关)将被更改

我的代码

/p>

$('#district').on('change',function(){
var district = $('#district').val();

//console.log("State Name for Country",countryname);
if(!district){
return;
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});  
$.ajax({
type:'GET',
url: 'get-block?district='+district,
success:function(response){
// console.log(response);
if(response){

$("#block").empty();


$.each(response,function(key,value){

$("#block").append('<option value="'+value+'">'+key+'</option>');
});
}
},

}); //ajax ends

});

HTML叶片

<div class="form-group has-feedback">
<label>District</label>
<select class="form-control" id="district" name="district">
<option value="">Select</option>
@foreach($district as $district)
<option value="{{$district->TDM_Dist_Code}}">{{$district->TDM_Dist_Name}}</option>
@endforeach
</select>
</div>
<div class="form-group has-feedback">
<label>Block</label>
<select class="form-control" id="block" name="block">
<option value="" id="after_block">Select</option>
</select>
</div>

Answer 1

可以像下面这样清除select的内容:

$("#block").empty();

则在填充新值时只需使用:

$("#block").append("<option value=''>Select</option>");

用。

附加空选项所以你的代码看起来像这样:

$('#district').on('change', function () {
var district = $('#district').val();
//console.log("State Name for Country",countryname);
if (!district) {
return;
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
//Just before making ajax empty the select list, 
// with this if your ajax fails, you wont have wrong data against district.
$("#block").empty();
$.ajax({
type: 'GET',
url: 'get-block?district=' + district,
success: function (response) {
// console.log(response);
if (response) {
$("#block").append("<option value=''>Select</option>");
$.each(response, function (key, value) {
$("#block").append('<option value="' + value + '">' + key + '</option>');
});
}
},
}); //ajax ends
});