convertir une liste ul/li en select/option

Par Motel, il y a 9 ans

Javascript

Bonjour,

Depuis quelques jours je cherche comment convertir une liste ul/li en select/option avec jquery pour pouvoir par la suite récupérer la valeur en php.

Voilà mon code html j'utilise ce model http://creativeit.github.io/getmdl-select/

<!-- Simple Select --> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height"> <input class="mdl-textfield__input" type="text" id="select" name="select" readonly tabIndex="-1"> <label for="select" class="mdl-textfield__label">Sélectionnez une étiquette</label> <ul for="select" class="mdl-menu mdl-menu--bottom-left mdl-js-menu"> <?php foreach($categories as $cat): ?> <li class="mdl-menu__item"><span class="tag" style="background-color: <?= $cat->tag; ?>"></span> <?= $cat->name; ?></li> <?php endforeach; ?> </ul> </div> <!-- -->

6 réponses

kubz, il y a 9 ans

Hello,

Le composant que tu veux utiliser, possède déjà un js qui rempli le champ input.

Sur le site [http://creativeit.github.io/getmdl-select/]() en loadant jquery en console

var jq = document.createElement('script'); jq.src = "https://code.jquery.com/jquery-3.1.1.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); // tu attends que ça load qques secondes jQuery.noConflict();

tu peux ensuite récupérer la valeur du champ input avec:

$("#sample1").val()

dans ton code faudrait changer ton id="select" avec un autre id (histoire de ne pas les confondre si tu en as plusieurs dans ta page)

En tout cas, c'est ce que je ferai, plutôt que de péter tout le style du composant (ce qui perd tout son intérêt autant faire ton propre composant dans ce cas).

bahcmoa, il y a 9 ans

heuuu ... à voir le modèle sur github, il semble que tu as oublié le data-val="<?= $cat->name; ?>" sur ton/tes li ... mais bon, j'ai pas testé

Motel, il y a 9 ans

j'ai testé data-val="<?= $cat->id; ?>"cela ne fonctionne pas

Lartak, il y a 9 ans

Bonsoir.
Vérifies si tu n'as pas d'erreur dans la console de l'inspecteur de ton navigateur.

kubz, il y a 9 ans

@motel : tu load bien le JS getmdl-select ?

Motel, il y a 9 ans

Bonsoir,

@Lartak j'ai regardé mais je n'ai aucun messages d'erreurs dans la console @kubz Oui j'ai bien charger le Js mais ça ne veut pas fonctionner je sais pas pourquoi c'est bizarre de plus j'ai aucun message d'erreur dans la console du navigateur :/