Transformer une menu ul/li en option/select

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');
    });

});