asp.net core combine select, javascript and bootstrap-select

Question

I have a cascade select   "Location"   class = "form-control border-warning selectpicker"  asp-items= "Model.Locations"  OnChange= "func1()" >                        "" >--Select Asset Location--                           "Asset"   class = "form-control border-warning selectpicker"  asp-items= "@(new SelectList(string.Empty, " WOAId ", " AssetID ", " AssetName "))"  OnChange= "func2()" >                        "" >--Select Asset--                        and getting the value for the second select with   $( "#Location" ).on( "change" , function () {           var categoryId = $( this ).val();           $( "#Asset" ).empty();           $( "#Asset" ).append( " --Select Asset-- " );           $.getJSON(`?handler=Asset&id=${categoryId}`, (data) => {               $.each(data, function (i, item) {                   $( "#Asset" ).append(` "${item.value}" > ${item.text} `);               });           });       });    How do I include bootstrap-select into the above?   $( '#Location' ).selectpicker({                   liveSearch:  true                });      $( '#Asset' ).selectpicker({                   liveSearch:  true                });

Sachin Singh · Accepted Answer

ohhhh
now i got the issue , after filling data you are not refreshing the select . change it as follow. $( "#Location" ).on( "change" , function () {             var categoryId = $( this ).val();             $( "#Asset" ).empty();             $( "#Asset" ).append( " --Select Asset-- " );             $.getJSON(`?handler=Asset&id=${categoryId}`, (data) => {                 $.each(data, function (i, item) {                     $( "#Asset" ).append(` "${item.value}" > ${item.text} `);                 });             });       $( '#Asset' ).selectpicker( 'refresh' );          });

Marius Vasile · Answer

$(function () {       $( "#Location" ).on( "change" , function () {           var categoryId = $( this ).val();           $( "#Asset" ).empty();           $( "#Asset" ).append( " --Select Asset-- " );           $.getJSON(`?handler=Asset&id=${categoryId}`, (data) => {               $.each(data, function (i, item) {                   $( "#Asset" ).append(` "${item.value}" > ${item.text} `);               });               $( '#Asset' ).selectpicker( 'refresh' );            });       });   });   but is not working, data is not loading

Sachin Singh · Answer

$.getJSON(`?handler=Asset&id=${categoryId}`, (data) => {
$.each(data, function (i, item) {
$("#Asset").append(`"${item.value}"> ${item.text}`);
});
$('#Asset').selectpicker('refresh');
});

Marius Vasile · Answer

I tried but I have no result

Marius Vasile · Answer

On the same page I have 4 select, each with different id, no repeat. But why if I remove selectpicker from class I have data and if I put it, I don't? That means is by-passing the javascript I have for the second select

Sachin Singh · Answer

On the same page press ctrl+F and find #Assest , by mistake you given two select the same id , that is causing the issue. change the id to something else and it should work.

Marius Vasile · Answer

The problem I have is that the second select list (#Asset) doesn't have any values if I use selectpicker. If I remove then I have

Sachin Singh · Answer

sir , you have already used the class "selectpicker" , so it should already work without any javascript code.Are you not getting desired UI style?