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