Google Dart向DropDown添加元素

Question

I'm attempting to dynamically add elements to an HTML dropdown via Google Dart. I'm not having much luck adding the elements the standard way by adding children with a map or string from an original JSON feed. Maybe there's another way? Ignore the selectedIndex because that's for debugging purposes. See the HTML and Dart code below and please let me know if you need more information.

<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 attempt(s):

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

The children of a SelectElement are OptionElements. Therefore you need to give in 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']));
  }
}

The code, takes every object out of the parsed JSON objects "serviceResponseValue" and creates a new OptionElement where the data that is shown to the user is the text behind the key "displayName", which in your example turns out to be Domains registered during the last 36 hours , and for the value, which you use to identify an option from the others, I have chosen the "id" text, which will give you in your html an option that will look like:

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