Discussion :

[Fyoni]

Salut tous, J'ai conçu des entrées de sélection personnalisée pour la date de naissance de l'utilisateur (jour, mois et année) avec du et PHP dans une liste non ordonnée, donc l'élément <select> devient <ul> et <option> devient <li>, j'ai décidé de personnaliser ma propre entrée de sélection car je n'aime pas le style traditionnel de l'entrée de sélection, mais malheureusement, le formulaire n'envoie pas les données sélectionnées au serveur de manière dynamique. Cela fonctionne bien lorsque je supprime le code JS qui personnalise la zone de sélection ou lorsque j'attribue des constantes au différentes entrées. Les éléments select sont toujours présents dans le DOM mais je ne sais pas pourquoi ils n'envoient pas les données au serveur, quelqu'un peut-il m'aider s'il vous plaît.

PHP/HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<form action="/url/accounts/" method="POST">
  <div class="profile__input">
    <div class="input__title tx-gray">Date de naissance</div>
    <div class="input__dropdown">
      <select id="day" name="birth_day">
        <option value="hide">Jour</option> <?php for ($i = 1; $i <= 31; $i++) : ?> <option value="
                                            <?php echo ($i < 10) ? '0'.$i : $i; ?>"> <?php echo $i; ?> </option> <?php endfor; ?>
      </select>
      <select id='month' name='birth_month'>
        <option value="hide">Mois</option> <?php
                                            $monthArray = [
                                                ['id'=>1, 'month'=>'Janvier'],
                                                ['id'=>2, 'month'=>'Février'],
                                                ['id'=>3, 'month'=>'Mars'],
                                                ['id'=>4, 'month'=>'Avril'],
                                                ['id'=>5, 'month'=>'Mai'],
                                                ['id'=>6, 'month'=>'Juin'],
                                                ['id'=>7, 'month'=>'Juillet'],
                                                ['id'=>8, 'month'=>'Août'],
                                                ['id'=>9, 'month'=>'Septembre'],
                                                ['id'=>10, 'month'=>'Octobre'],
                                                ['id'=>11, 'month'=>'Novembre'],
                                                ['id'=>12, 'month'=>'Décembre']
                                            ];
                                        foreach($monthArray as $val){
 
                                            if($val == $userData->birthday)
                                            {
                                                echo "
                                        <option value=".$val['id']." selected>".$val['month']."</option>";
                                                }
                                                else {
                                                    echo "
                                        <option value=".$val['id'].">".$val['month']."</option>";
                                                    }
                                        }
                                                    ?>
      </select>
      <select id="year" name="birth_year">
        <option value="hide">Année</option> <?php for ($i = 1950; $i <= date('Y'); $i++) : ?> <option value="
                                            <?php echo $i; ?>"> <?php echo $i; ?> </option> <?php endfor; ?>
      </select>
    </div>
  </div>
  <div>
    <input type="submit" class="submitBtn" name="btnUpdate" value="SAVE">
  </div>
</form>

JS

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
$(function() {
$('select').each(function(){
    var $this = $(this), numberOfOptions = $(this).children('option').length;
 
    $this.addClass('select-hidden');
    $this.wrap('<div class="select blu-dropdown dropdown__item b-selection"></div>');
    $this.after('<div class="select-styled"></div>');
 
    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());        // <button class="blu-list__item">
 
    var $dropdownContainer = $('<div />', {
        'class': 'select-options blu-dropdown__content b-shadowed'
    }).insertAfter($styledSelect);
 
    var $listContainer = $('<div />', {
        'class': 'blu-list b-overflow-y'
    }).appendTo($dropdownContainer);
 
    var $list = $('<ul />').appendTo($listContainer);
 
    for (var i = 0; i < numberOfOptions; i++) {
        var $listItem = $('<li />', {
            'class': 'calendar__item'
        }).appendTo($list);
 
        var $listItemBtn = $('<div />', {
            'class': 'blu-list__item',
        }).appendTo($listItem);
 
        var $listItemHeading = $('<div />', {
            'class': 'blu-list__item-heading',
        }).appendTo($listItemBtn);
 
        $('<label />', {
            'class': 'blu-list__item-heading',
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($listItemHeading);
    }
 
    var $listItems = $list.children('li');
 
    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').not(this).each(function(){
            $(this).removeClass('active').next('div.select-options').hide();
        });
        $(this).toggleClass('active').next('div.select-options').toggle();
    });
 
    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $dropdownContainer.hide();
    });
 
    $(document).click(function() {
        $styledSelect.removeClass('active');
        $dropdownContainer.hide();
    });
     });
});

[Séb.]

Tout ceci me paraît bien compliqué
J'ai pas l'impression que tu donnes une valeur à tes <select> après un clique sur un élément de liste
Les <select> ne sont pas affichés non ? Dans ce cas pourquoi ne peut simplement utiliser un <input type="hidden"> ?

Je ferais de cette manière.
Tu peux mettre les champs HIDDEN à TEXT si tu veux voir ce qui se passe.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
document.addEventListener("DOMContentLoaded", event => {
    Array.from(document.getElementsByTagName("li")).forEach(element => {
        element.addEventListener("click", function(event) {
            document.forms[0].elements[this.dataset.target].value = this.dataset.value;
        });
    });
});
</script>
 
<?php print_r($_POST) ?>
 
<form method="post">
    <input type="hidden" name="day">
    <input type="hidden" name="month">
    <input type="hidden" name="year">
    <button type="submit">Envoyer</button>
</form>
 
<ul>
    <?php foreach (range(1, 31) as $day): ?>
        <li data-value="<?= $day ?>" data-target="day"><?= $day ?></li>
    <?php endforeach ?>
</ul>
 
<ul>
    <?php foreach (['Jan.', 'Fév.', 'Mars', 'Avr.', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct', 'Nov.', 'Déc.'] as $i => $month): ?>
        <li data-value="<?= $i + 1 ?>" data-target="month"><?= $month ?></li>
    <?php endforeach ?>
</ul>
 
<ul>
    <?php foreach (range(1950, date('Y')) as $year): ?>
        <li data-value="<?= $year ?>" data-target="year"><?= $year ?></li>
    <?php endforeach ?>
</ul>

[Fyoni]

@Séb, merci pour ton aide, mais je ne sais pas si tu as testé ton code, jai copié collé ton code mais rien ne semble fonctionner lorsque je clique sur les element li.
Tu pourrais tester mon code stp, les select affichent et sont presentent dans le DOM mais jusque comme tu las dit jai limpression que je donne pas de valeurs a mes select

[jreaux62]

Bonjour,

Il existe des script JS qui font le job :

• select2
• select chosen
• Selectize.js

[Séb.]

@Séb, merci pour ton aide, mais je ne sais pas si tu as testé ton code, jai copié collé ton code mais rien ne semble fonctionner lorsque je clique sur les element li.

Si, et il fonctionne. Par contre ce n'est qu'une ébauche (ex. la liste reste affichée après une sélection), à toi de le compléter pour avoir le comportement souhaité.

Tu pourrais tester mon code stp, les select affichent et sont presentent dans le DOM mais jusque comme tu las dit jai limpression que je donne pas de valeurs a mes select

Je l'ai testé, et je t'ai dit ce que j'en pensais. À toi de valoriser tes <select> correctement, je ne sais pas comment faire avec jQuery.