I have a selectpicker list with initial style but when is populated the style is not applyed and I cannot change it using methods mentioned below
<div class="col-sm-2">
<label class="form-control text-white text-center" style="background-color: #1E90FF; height: 50px; font-size:12px">Tip masura</label>
<select id="TipMasura" class="form-control border-danger p-0" style="font-size:12px; height:50px; color:darkred" asp-items="@Model.SelectTipMasura">
<option value="">Selecteaza tipul masurii</option>
</select>
<span asp-validation-for="EvarisMasura.Clasa" class="text-danger"></span>
<input hidden asp-for="EvarisMasura.Clasa" id="txtTM" />
</div>
<div class="col-sm-4">
<label class="form-control text-white text-center" style="background-color: #1E90FF; height: 50px; font-size:12px">Masura de protectie</label>
<select id="Masura" class="form-control border-danger" style="font-size:14px; height:50px;" asp-items="@(new SelectList(string.Empty, "Masura"))">
<option value="">Selecteaza masura</option>
</select>
<span asp-validation-for="EvarisMasura.Masura" class="text-danger"></span>
<input hidden asp-for="EvarisMasura.Masura" id="txtMasura" />
<div id="AddNew" hidden>
<input class="form-control" style="font-size:12px; height:50px" asp-for="EvarisMasura.Masura" placeholder="Care este masura de protectie?" />
</div>
</div>
and json for populating the select list
$(function () {
$("#TipMasura").on("change", function () {
var categoryId = $("#TipMasura :selected").text();
$("#Masura").empty();
$("#Masura").append("<option value='0'>--Selecteaza o masura existenta--</option>");
$("#Masura").append("<option value='1'>--Adauga o masura noua--</option>");
$.getJSON(`?handler=Masura&id=${categoryId}`, (data) => {
$.each(data, function (i, item) {
$("#Masura").append(`<option value="${item.value}">${item.text}</option>`);
});
$('#Masura').selectpicker({ liveSearch: true });
$("#Masura").selectpicker('refresh');
$("#Masura").addClass("sMasura")
});
var data = $("#TipMasura :selected").text();
$("#txtTM").val(data);
});
});
$(function () {
$("#Masura").on("change", function () {
var data = $("#Masura :selected").text();
if (data == "--Selecteaza o masura existenta--") {
$("#AddNew").attr("hidden", true);
$("#txtMasura").val("");
}
else if (data == "--Adauga o masura noua--") {
$("#AddNew").attr("hidden", false);
$("#txtMasura").val("");
}
else {
$("#AddNew").attr("hidden", true);
$("#txtMasura").val(data);
}
});
});
and css
<style>
.sMasura{
font-size: 12px;
height: 50px;
color: darkred;
}
</style>
I also tried $("#Masura").css("height", "50") but no results