javascript - Google Dart 添加元素到 DropDown

Question

我正在尝试通过 Google Dart 将元素动态添加到 HTML 下拉列表中。通过使用原始 JSON 提要中的 map 或字符串添加子元素，我没有多少运气以标准方式添加元素。也许还有另一种方法？忽略 selectedIndex，因为它用于调试目的。请参阅下面的 HTML 和 Dart 代码，如果您需要更多信息，请告诉我。

<select id="asset" class="titilium" selectedIndex="{{currentIndex}}" value="{{dropDownValue}}" on-change="{{changedHandler}}" required>
                <option selected disabled>Select an existing set of query results:</option>
                <option value="Recent Choices">Recently Choices</option>
</select>

Dart 尝试:

void loadDropDown()
  {
    dropDownURL = "";
    print(dropDownURL);

    var request = HttpRequest.getString(dropDownURL).then(onDropDownLoaded);
        request.catchError(handleFailure);
  }

 void onDropDownLoaded(String response)
 {
   var jsonString = response;
   var dropDownValue = shroot.querySelector("#asset");
   String displayName = "";

   Map jsonObject = JSON.decode(jsonString) as Map;
       dropDownList = jsonObject["serviceResponseValue"] as List<Map>;

   LinkedHashMap<String, Map> dataMap = new LinkedHashMap<String, Map>();
       for(var d in dropDownList)
       {

         HashMap rowMap = new HashMap();

//         String domainId = d["targetAsset"]["id"];
//         dataMap[domainId] = rowMap;
//         rowMap["id"] = domainId;

         //rowMap["displayName"] = d["filterInputParameters"]["displayName"];

         //dropDownValue.children.add(rowMap["displayName"] = d["filterInputParameters"]["displayName"]);
         displayName = rowMap["displayName"] = d["displayName"];
         //dropDownValue.children.add(rowMap["displayName"] = d["displayName"]);

         print(d);
         print(displayName);
       }
 }

Answer 1

SelectElement 的子元素是 OptionElements。因此，您需要提供 OptionElements。

void onDropDownLoaded(String response)
{
  SelectElement dropDown = querySelector("#asset");

  Map jsonObject = JSON.decode(response) as Map;
  List<Map> dropDownList = jsonObject["serviceResponseValue"] as List<Map>;

  for(Map d in dropDownList)
  {
    dropDown.children.add(new OptionElement(data: d['displayName'], value: d['id']));
  }
}

代码从解析的 JSON 对象“serviceResponseValue”中取出每个对象并创建一个新的 OptionElement，其中向用户显示的数据是键“displayName”后面的文本，在您的示例中结果是在过去 36 小时内注册的域，对于用于从其他选项中识别选项的值，我选择了“id”文本，它将在您的 html 中为您提供一个选项看起来像:

<option value="8a49861a47b12b7c0147b12b7fe60000">Domains registered during the last 36 hours</option>