Transformer une menu ul/li en option/select

Par Motel, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

j'ai créer un menu déroulant que je souhaiterais transformer avec Jquery en option/select pour pouvoir par la suite envoyer les données à la base de données, mais je ne sais pas du tout comment m'y prendre pour réussir à faire ça.

<div id="dpd2" class="wrapper-dropdown"> <span>Type d'emploi</span> <ul class="dropdown" name="type"> <?php foreach($category_type as $type): ?> <li value="<?= $type->id; ?>"><?= $type->name; ?></li> <?php endforeach; ?> </ul> </div>

Mon code Js

function DropDown(el) { this.dpd = el; this.placeholder = this.dpd.children('span'); this.opts = this.dpd.find('ul.dropdown > li'); this.val = ''; this.index = -1; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.dpd.on('click', function(event){ $(this).toggleClass('active'); return false; }); obj.opts.on('click',function(){ var opt = $(this); obj.val = opt.text(); obj.index = opt.index(); obj.placeholder.text(obj.val); }); }, getValue : function() { return this.val; }, getIndex : function() { return this.index; } } $(function() { var dpd = new DropDown( $('#dpd') ); var dpd = new DropDown( $('#dpd2') ); var dpd = new DropDown( $('#dpd3') ); $(document).click(function() { // all dropdowns $('.wrapper-dropdown').removeClass('active'); }); });

5 réponses

Mehdikacim, il y a 9 ans
<div id="dpd2" class="wrapper-dropdown"> <span>Type d'emploi</span> <SELECT name="type"> <?php foreach($category_type as $type): ?> <option value="<?= $type->id; ?>"><?= $type->name; ?></option> <?php endforeach; ?> </SELECT> </div>
Motel, il y a 9 ans

Salut Mehdikacim,

Je veux faire ça avec Jquery, en faisant comme tu as dit je ne pourrai pas customiser les select/option.

Mehdikacim, il y a 9 ans

Comment ça, les customisers ?
Sinon, si tu fais avec jQuery -> AJAX

Motel, il y a 9 ans

Si j'utilise les select/option je ne pourrai pas les styliser avec le CSS. C'est pour cela que je veux utiliser Jquery pour transformer le ul/li on select/option, mais je ne sais pas comment faire c'est pour cela que j'ai crée le sujet ;)

Lartak, il y a 9 ans

Bonsoir.
Que ce soit au chargement de la page ou après, ça ne changera pour l'apparence, car même après le chargement de la page, si tu modifies des éléments HTML dans ta page, le navigateur le prendra en compte quand même.
Donc, que tu aies un select au moment du chargement de la page ou que tu le rajoutes après via javascript, ça ne changera rien.