自定义样式select选择框无法向服务器提交表单数据如何解决？

核心问题出在自定义下拉的取值逻辑和初始状态同步上，具体有两处错误：

• 点击下拉项取值错误：你在生成DOM结构时，把原<option>的value值存在了<label>标签的rel属性上，但点击事件绑定的是外层<li>元素，直接从<li>读取rel属性会拿到undefined，导致原生<select>的值被错误赋值为空，表单提交时自然不会携带对应字段。
• 初始选中状态未同步：如果PHP渲染页面时已经给部分<option>加了selected属性（比如用户编辑资料时的原有值），你当前的代码只会默认显示第一个option的文本，不会同步对应选中值，也会导致初始提交的数值错误。

另外可以额外检查你的.select-hidden样式：只要没有给<select>设置disabled属性，哪怕用display: none隐藏，带name属性的表单元素都会正常参与提交，不会有问题。

修改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');
    // 修复1：初始化时取选中的option文本，而非固定第一个
    $styledSelect.text($this.children('option:selected').text());

    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');
        // 修复2：从li内部的label取rel属性，而非直接从li取
        $this.val($(this).find('label').attr('rel'));
        $dropdownContainer.hide();
    });

    $(document).click(function() {
        $styledSelect.removeClass('active');
        $dropdownContainer.hide();
    });
  });
});

内容的提问来源于stack exchange，提问作者marvin