在选择选项之前出现框?

Box appears before option is selected?

我有一个下拉列表,当某个选项被 selected 时,它应该打开一个新列表,无论出于何种原因,当我重新加载页面时,隐藏框之一出现,但当我重新加载时消失select 未连接到该框的选项。

function CheckDep(val)
{
    var element=document.getElementById('line')
    if(val=='others')
        element.style.display='block'
    else
        element.style.display='none';
    var element=document.getElementById('manufact')
    if (val=='machine')
        element.style.display='block'
    else
        element.style.display='none';
}
<body>
    <label for="color">Department:</label>
    <select name="color" onchange='CheckDep(this.value);'>
        <option></option>
        <option value="ware">Warehouse</option>
        <option value="machine">Manufacturing</option>
        <option value="others">Packaging</option>
    </select>

    <select type="text" name="color" id="manufact" style='display:none;'>
        <option value=""></option>
        <option value="hi">hi</option>
    </select>

    <select type="text" name="color" id="line" style='display:none;'>
        <option value=""></option>
        <option value="6">6</option>
        <option value="14">14</option>
    </select>
</body>

我是不是漏掉了什么?

以下 select 元素中的样式不正确:

<select type="text" name="color" id="manufact" style='display;none;'>

必须如下:

<select type="text" name="color" id="manufact" style='display:none;'>

下面的select元素也有错误:

<select type="text" name="color" id="line" style='display:none;'/>

必须如下:

<select type="text" name="color" id="line" style='display:none;'>

您还需要为该 select 元素使用结束标记 </select>