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

时间:2019-04-05 09:48:55

标签: javascript materialize

我刚刚开始使用物化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。

0 个答案:

没有答案