如何使自定义选择框将表单数据发送到服务器

Question

我已经为用户生日（日、月和年）设计了一些选择输入，其中一些 javascript 进入了一些无序列表，所以 <select> 元素变为 <ul> 和 <option> 变为 <li>，我决定自定义我自己的选择框，因为我不喜欢选择框的传统样式，但不幸的是表单不会动态地将选择的数据发送到服务器。当我删除样式选择框的 JS 代码时，它工作正常。选择元素仍然存在于 DOM 中，但我不知道他们为什么不将数据发送到服务器，谁能帮助我。

PHP/HTML

<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

$(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();
    });
     });
});

Answer 1

属性值感觉没有分隔符。 试试这样：

screenshot

PS：如果数据已提交，请在控制台（网络浏览器）中查看，然后点击“网络”。

否则尝试使用自定义下拉列表（完全自制）结合 addEventListener 和隐藏的选择字段并没有错。