Używam Bootstrap i próbuję wypełnić listę rozwijaną. To nie działa. Dostaję tylko pustą listę. Z drugim kodem HTML (poniżej) wszystko działa dobrze. Co tęsknię? Używam JavaScript.

Oto mój kod JavaScript:

var select = document.getElementById("ID1");
for (var j = 0; j < arr.length; j++) {
   var opt = arr[j];
   var el = document.createElement("option");
   el.textContent = opt;
   el.value = opt;
   select.appendChild(el);
}

Mój kod HTML Bootstrap, który nie działa:

<div class="dropdown bootstrap-select show-tick"> 
<select class="selectpicker"  id='ID1'> 
</select>
</div>

Dzięki następującym kodzie HTML wszystko działa dobrze:

<select class="custom-select custom-select-sm" id="ID1"></select>

Byłbym szczęśliwy, gdybyś pomógł. Dzięki!

0
Harald 15 kwiecień 2021, 15:24

2 odpowiedzi

Najlepsza odpowiedź

Do mojej wiedzy, klasa selectpicker nie istnieje w Bootstrap. W drugim przykładzie używasz domyślnego Custom-Select bootstrap.

Jednak zgodnie z pierwszym fragmentem HTML, wydaje się, że chcesz użyć klasy selectpicker. Istnieje wtyczka jQuery o nazwie Bootstrap-Wybierz, aby poprawić domyślny komponent Bootstrap. Jeśli chcesz tego użyć, najpierw musisz dodać odpowiednie arkusze stylów i plików JS.

Edytuj: Wspomniałeś, że rozwijana jest wyświetlana, ale bez danych w nim. Nie jestem bardzo zaznajomiony z tą wtyczką, ale udało mi się zdobyć działa Przykład na podstawie kodu. Może to pomaga.

Nie wiem, jak twój projekt jest dokładnie zorganizowany, ale w moim przykładzie kluczowa część jest ta część:

$(function () {
  $(".selectpicker").selectpicker("refresh");
});

Objaśnienie: Biblioteki są ładowane, a zainicjowane biblioteki, zanim dane zostaną dodane do elementu SELECT. Ponieważ Bootstrap-Select Dodaje przycisk i niektóre Divs, aby utworzyć rozwijaną, oryginalny element wyboru nie jest widoczny i jest prawdopodobnie używany tylko jako źródło danych. Domyślnie bootstrap-select nie jest reaktywny. W ten sposób musimy powiedzieć Bootstrapselect, aby zaktualizować swoje dane.

1
Jan 15 kwiecień 2021, 20:45

textContent nie jest prawidłową właściwością obiektu {X1}} (co jest tworzone, gdy używasz document.createElement("option")) - chcesz ustawić el.text, a jeszcze lepiej, stwórz Element Option bezpośrednio:

var select = document.getElementById("ID1");
for (var j = 0; j < arr.length; j++) {
   var opt = arr[j];
   var el = new Option(opt, opt);
   select.appendChild(el);
}
0
Psychemaster 15 kwiecień 2021, 14:32