select标签实现二级联动

使用onchange事件实现select标签二级联动，详见代码：
html代码：

<select id="parent">
    <option value="PleaseSelect">--请选择--</option>
    <option value="WeiGuo">魏国</option>
    <option value="ShuGuo">蜀国</option>
    <option value="WuGuo">吴国</option>
</select>
<select id="child">
    <option value="PleaseSelect">--请选择--</option>
</select>

javascript代码：

<script type="text/javascript">
    let parent = document.getElementById("parent")
    parent.onchange=function(){
    
    
        let parent_value = parent.value
        let child = document.getElementById("child")
        switch(parent_value){
    
    
            case "WeiGuo":
                child.innerHTML = "<option value='CaoCao'>曹操</option><option value='XunYu'>荀彧</option>"
                break
            case "ShuGuo":
                child.innerHTML = "<option value='LiuBei'>刘备</option><option value='ZhuGeLiang'>诸葛亮</option>"
                break
            case "WuGuo":
                child.innerHTML = "<option value='SunQuan'>孙权</option><option value='ZhouYu'>周瑜</option>"
                break
            default:
                alert("error")
        }
    }
</script>