Marius Vasile

Marius Vasile

  • 591
  • 1.6k
  • 122.2k

Add style to selectpicker selectlist

Jan 8 2023 8:14 AM

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


Answers (2)