html的<select>标签

分类有上衣、裤子、鞋子,我要的是当中类选择不同的内容,下面会显示不同的下拉框,求大神帮忙?

<label>
    <span>中类</span>
    <select onchange="onSelectChange(this)">
        <option value="sy">上衣</option>
        <option value="kz">裤子</option>
        <option value="xz">鞋子</option>
    </select>
</label>
<ul style="">
    <li id="sy">
        <label>
            <span>小类</span>
            <select>
                <!-- 第一个种类的option,自己加 -->
                <option>上衣的选项1</option>
            </select>
         </label>
    </li>
    <li id="kz">
         <label>
            <span>小类</span>
            <select>
                <!-- 第二个种类的option,自己加 -->
                <option>裤子的选项1</option>
            </select>
         </label>
    </li>
    <li id="xz">
         <label>
            <span>小类</span>
            <select>
                <!-- 第三个种类的option,自己加 -->
                <option>鞋子的选项1</option>
            </select>
         </label>
    </li>
</ul>

<script>

function onSelectChange(el) {
document.getElementById('sy').style.display = 'none';
document.getElementById('kz').style.display = 'none';
document.getElementById('xz').style.display = 'none';
document.getElementById(el.value).style.display = 'initial';
}

// 开始选择上衣的小类,可否?
onSelectChange({value: 'sy'});
</script>

温馨提示:答案为网友推荐,仅供参考