在动态下拉列表中，只有第一个元素是可见的。

Question

我试图根据所选州的值建立一个依赖性的Dropdown列表，Districts。但我的代码只渲染动态下拉列表的第一个元素。

<div class="input-field col s3">
<select id="nativeDistr">
    <option value="" disabled selected>
        Native District
    </option>
</select>
<label>Destination District</label>

;

Appscript代码Snippet.

function getDistricts(state) {
Logger.log("Selected State=" + state);
var fileName = "states-and-districts.json";
var files = DriveApp.getFilesByName(fileName);
try {
    if (files.hasNext()) {
        var file = files.next();
        var content = file.getBlob().getDataAsString();
        var json = JSON.parse(content).states_districts;
        for (var i = 0; i < json.length; i++) {
            if (json[i]["state"] === state) {
                var districts = json[i]["districts"];
            }
        }
    }
    var optList = generateOptions(districts);
    Logger.log(optList);
    return optList;
} catch (err) {
    return "Error getting data";
}

}

脚本代码

<script>
document.getElementById("nativeState").addEventListener("change", getDistr);

function getDistr() {
    var state = document.getElementById("nativeState").value;
    console.log("state scriptt:" + state);
    google.script.run.withSuccessHandler(updatedistricts).getDistricts(state);
}

function updatedistricts(districts) {
    console.log("From districts:" + districts);
    var nativeDistr = document.getElementById("nativeDistr");
    nativeDistr.innerHTML = districts;
    M.updateTextFields();
} // When user selects the state the valuee off the state should get registered for district search

句号

在执行过程中，我得到了完整的动态下拉列表，但在渲染页面时只显示了第一个元素。

阻止引用

Answer 1

M.updateTextFields() 不更新动态下拉，它更新的是文本字段。所以需要存储一个全局引用来物化选择框来初始化它，后需要销毁这个实例，然后再重新初始化选择框。

<script>
        document.addEventListener("DOMContentLoaded", function () {
            var elems = document.querySelectorAll("select");
            var instances = M.FormSelect.init(elems);
        });
 document.getElementById("nativeState").addEventListener("change", getDistr);

function getDistr() {
   var state = document.getElementById("nativeState").value;       
   google.script.run.withSuccessHandler(updatedistricts).getDistricts(state);

}

function updatedistricts(distrList){         
    nativeDistr.innerHTML  = distrList;
    var subcatSelectElem = document.querySelectorAll("select");
    var subcatSelectInstance = M.FormSelect.init(subcatSelectElem, {});

}

解决的功..: 芝加哥电脑班