问题使用对象数据动态创建选择菜单并实现

Question

我试图将选择菜单置于模式中，并且遇到一个奇怪的问题，因为选择菜单中装有display：none，所以它被隐藏了，正常的行为是物化的吗？

选择上方的名称字段仅显示选择中的第一个条目，除非我删除显示：检查器中没有显示，然后允许我从选择中选择任何值并重复上面的值。 我在做什么错了？

这是我要添加选择内容的div

<div class="input-field col s12">
                    <select class="custName">
                    </select>
                    <label>Select Customer</label>
                </div>

我在html页面的结尾处称呼这个

<script>$(document).ready(function(){
$('select').formSelect();  
});</script>

在此处创建我的选择选项

const custData = (data) => {
if (data.length) {
    let html = '';
    data.forEach(doc => {
        const cust = doc.data();
        //console.log(cust);
        const select = `
  <select>
    <option value=${cust.customerId}>${cust.name},  ${cust.address.postCode}</option>
  </select>
  `;
        html += select;
    });
    customerList.innerHTML = html;
} else {
    customerList.innerHTML = '<ul class="center-align">no data</ul>'
  }
};

请让我摆脱痛苦