javascripthtmlhtml-selectdropdownbox

Box appears before option is selected?

I have a drop down list that is supposed to open a new list when a certain option is selected, for whatever reason one of the hidden boxes appears when I reload the page but goes away when I select an option that isn't connected to that box.

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>

Am I missing something?

Solution

  • The style in the following select element is not correct:

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

    It has to be as follow:

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

    Also there is mistake in the following select element:

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

    It has to be as follow:

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

    Also you need to use closing tag for that select element </select>