Bonsoir à tous!

Je veux avoir select2 sur un select que je crée de façon dynamique. Quand je tente le coup, le select n'apparait pas sur la page mais il est bien présent lorsque j'inspecte le code.

Voici mon code:

#addInputTd(){
        const td = createElement('td')
        const select = createElement('select', {class: 'form-control form-control-sm'})
        const option = createElement('option', {value: ''})
        option.innerText = 'Sélectionnez un intrant'
        select.append(option)

        for (const input of this.#allIntrants) {
            const option = createElement('option', {value: input.id})
            option.innerText = input.designation

            // On sélectionne l'option si l'id de l'intrant correspond à l'intrant de la ligne (le EstimateInput)
            if(input.id === this.#intrant.id){
                option.setAttribute('selected', 'selected')
            }
            select.append(option)
        }

        $(select).select2();

        td.append(select)
        this.#tr.append(td)
    }
addIntrantsTd() est une méthode d'une classe

Ce que j'obtiens
Lorsque mon code s'exécute, voici ce que j'obtiens :

<select class="form-control form-control-sm select2-hidden-accessible" data-select2-id="select2-data-my-select" tabindex="-1" aria-hidden="true">
        ...
        <option value="...">...</option>
</select>

Je ne sais pas pourquoi le select ne s'affiche pas dans le navigateur.

Merci d'avance à tous

1 réponse


Kareylo
Réponse acceptée

Il faut que tu mettes ton élément dans ton HTML avant de le transformer en Select2.

Inverse ces deux lignes :

        $(select).select2();

        td.append(select)