Materializecss选择不起作用的追加选项

Question

我刚刚开始使用物化CSS框架。我想在使用JavaScript在matrializecss select中附加选项时遇到问题。 使用class="browser-default"时，我可以做到，但是使用class="input-field"时，我不能做到！

在我的html中，我使用了materializecss模态。这是我的代码：

function dynamicdropdown(listindex) {
    document.getElementById("sub_subcategory").length = 0;
    document.getElementById("sub_subcategory").options[0] = new Option("Please select framework version", "");
    document.getElementById("subcategory").length = 0;
    switch (listindex) {
        case "Php":
            document.getElementById("subcategory").options[0] = new Option("Please select framework", "");
            document.getElementById("subcategory").options[1] = new Option("Wordpress", "Wordpress");
            break;
        default:
            document.getElementById("subcategory").options[0] = new Option("Please select framework", "");
            break;
    }
    $('select').material_select();
    return true;
}

function dynamicdropdownone(listindex) {
    document.getElementById("sub_subcategory").length = 0;
    switch (listindex) {
        case "Wordpress":
            document.getElementById("sub_subcategory").options[0] = new Option("Please select framework", "");
            document.getElementById("sub_subcategory").options[1] = new Option("Wordpress Version1",
                "wordpress_version1");
            document.getElementById("sub_subcategory").options[2] = new Option("Wordpress Version2",
                "wordpress_version2");
            break;
        default:
            document.getElementById("sub_subcategory").options[0] = new Option(
                "Please select framework version", "");
            break;
    }
    return true;
}

        <div class="row">
            <div class="col s12 m4 l4 input-field">
                <select name="category" class="required-entry" id="category"
                    onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
                    <option value="">Please select framework</option>
                    <option value="Php">Php</option>
                    <option value="Java">Java</option>
                    <option value="Javascript">Javascript</option>
                    <option value="Dotnet">Dotnet</option>
                </select>
            </div>
            <div class="col s12 m4 l4 input-field">
                <script type="text/javascript" language="JavaScript">
                    document.write(
                        '<select name="subcategory"  id="subcategory" onchange="javascript: dynamicdropdownone(this.options[this.selectedIndex].value);"><option value="">Please select framework vesrion</option></select>'
                    )
                </script>
                <noscript>
                    <select name="subcategory" id="subcategory">
                        <option value="">Please select framework vesrion</option>
                    </select>
                </noscript>
            </div>
            <div class="col s12 m4 l4">
                <script type="text/javascript" language="JavaScript">
                    document.write(
                        '<select name="sub_subcategory" class="browser-default" id="sub_subcategory"><option value="">Please select framework vesrion</option></select>'
                    )
                </script>
                <noscript>
                    <select name="sub_subcategory" class="browser-default" id="sub_subcategory">
                        <option value="">Please select framework vesrion</option>
                    </select>
                </noscript>
            </div>
        </div>

注意：我使用jQuery 3.2.1和materializecss版本1.0.0。