DropdownList Doesn't Work on Mobile Devices - asp.net

Question

I have 2 dropdown list in my page. In web browser (PC side) It works fine. There is no problem. When i open the page with chrome toogle device toolbar and i resize as mobile view, it only gives this error
fastclick.js:1 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
csHTML Code
<div class="tab-pane active tabcontent" id="reservationPage" role="tabpanel">
<div class="col-sm-12 col-md-12">
<div class="form-group row rowR">
<label class="form-control-label col-md-2"><strong>Yemekhane</strong> </label>
<div class="col-md-12">
#Html.DropDownListFor(x => x.RefectoryId, new SelectList(Model.Refectories, "Id", "Name"), ("Seçiniz"), new { Id = "RefectoryId", #class = "form-control select2" })
</div>
</div>
<div class="form-group row rowR">
<label class="form-control-label col-md-2"><strong>Öğün</strong> </label>
<div class="col-md-12">
#Html.DropDownListFor(x => x.FoodMealId, new SelectList(Model.FoodMeals, "Id", "Name"), ("Seçiniz"), new { Id = "FoodMealId", #class = "form-control select2" })
</div>
</div>
</div>
</div>
JS Code
<script>
var reservationCount = 0;
var totalAmount = 0;
$(document).ready(function () {
$("#reservationCount")[0].textContent = "(" + reservationCount + ")";
//İlk açıldığında rezervasyon sayfasının acık gelmesi için
var tablinks = document.getElementById("reservationPageHead");
tablinks.className = tablinks.className + " active";
document.getElementById('reservationPage').style.display = "block";
//var foodMealId = $("#FoodMealId").val();
//var refectoryId = $("#RefectoryId").val();
//GetCalendarMenuPartial(foodMealId, refectoryId);
$("#RefectoryId").select2({
allowClear: true,
placeholder: 'Yemekhane Seçiniz',
// dropdownParent: $(".bootbox-body"),
});
var refectorySelect = $('#RefectoryId');
refectorySelect.on("select2:select", function (e) {
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
$.ajax({
url: "#Url.Action("GetRefectoryWithFoodMeal", "Reservation", new { area = "Common" })",
data: { refectoryId: refectoryId },
type: "POST",
async: false,
success: function (returnData) {
if (returnData.data == undefined) {
PageToastr(returnData.type, returnData.message, returnData.title);
}
else {
//FoodMeal List
$("#FoodMealId option[value]").remove();
$("#FoodMealId").select2({
allowClear: true,
placeholder: 'Seçiniz',
data : returnData.data,
});
}
},
beforeSend: function () {
$(".loaderDiv").show();
$(".loader").show();
},
complete: function () {
$(".loaderDiv").hide();
$(".loader").hide();
},
error: function (xhr, status, err) {
if (xhr.status === 999) {
noAuthorize(this.url);
}
}
});
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
GetCalendarMenuPartial(foodMealId, refectoryId);
});
$("#FoodMealId").select2({
allowClear: true,
placeholder: 'Öğün Seçiniz',
//dropdownParent: $(".bootbox-body"),
});
var foodMealSelect = $('#FoodMealId');
foodMealSelect.on("select2:select", function (e) {
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
GetCalendarMenuPartial(foodMealId, refectoryId);
});
// Rezervasyonu tamamla için tooltip
$('#completeReservation').tooltip('update');
});
</script>
<script>
function GetCalendarMenuPartial(foodMealId, refectoryId) {
$.ajax({
url: '#Url.Action("NewReservationCalendarMenuPartial", "Reservation", new { area = "Common" })',
data: { foodMealId: foodMealId, refectoryId: refectoryId, addCardMenu: $("#AddCardMenuString").val() },
type: "POST",
success: function (partialPage) {
if (partialPage.title != undefined) {
PageToastr(partialPage.type, partialPage.message, partialPage.title);
if (partialPage.result == '#Enums.ResultStatus.SessionTimeExpired.ToString()') {
setTimeout(function () { window.location.href = '/Login/Login'; }, 5000)
}
}
else {
$("#calendarMenuPartial").html(partialPage);
}
},
beforeSend: function () {
$(".loaderDiv").show();
$(".loader").show();
},
complete: function () {
$(".loaderDiv").hide();
$(".loader").hide();
},
error: function (xhr, status, err) {
if (xhr.status === 999) {
noAuthorize(this.url);
}
}
});
}
</script>
After that I've added touch-action: none; but it doesn't work too. It works properly in PC Devices. But never works on mobile devices.