Question

I have topic data looking like this:

010000 <- Top level header
010100 A <- Sub level header
010101 B <- Clickable item in the select list
010102 C <- Clickable item in the select list
010103 D <- Clickable item in the select list
010200 E <- Sub level header
010201 F <- Clickable item in the select list
010202 G <- Clickable item in the select list

Currently I am using the following code to make a select list that shows everthing:

var topics = contentService.Get(accountID + "06000").OrderBy(o => o.Order);
foreach (Content topic in topics) {
    txt += "<option value='" + topic.RowKey + "'>" + topic.Name + "</option>\n";
}

Is there a way I can change this so that:

• The top level headers are not part of the select list? in other words every row that ends in “0000” is not put into the topics variable.
• The sub level headers appear as groups in the select list.

Groups like this:

<select>
  <optgroup label="A">
      <option value="010101">B</option>
      <option value="010102">C</option>
      <option value="010103">D</option>
  </optgroup>
  <optgroup label="E">
      <option value="010201">F</option>
      <option value="010202">G</option>
  </optgroup>
</select>

I hope someone can help. I think maybe I can do the limiting but I don’t know how to do the start and end grouping.

Answer 1

To simplify matters a bit, let’s assume that your topics are defined in a following List:

List<Tuple<string, string>> topics = new List<Tuple<string, string>>
{
    Tuple.Create("010000", string.Empty),
    Tuple.Create("010100", "A"),
    Tuple.Create("010101", "B"),
    Tuple.Create("010102", "C"),
    Tuple.Create("010103", "D"),
    Tuple.Create("010200", "E"),
    Tuple.Create("010201", "F"),
    Tuple.Create("010202", "G"),
};

Then, you could simply iterate over each topic and build your HTML step-by-step:

XElement select = new XElement("select");
XElement optGroup = null;

foreach (var topic in topics)
{
    // skip root topic
    if (!topic.Item1.EndsWith("0000"))
    {
        // optgroup
        if (topic.Item1.EndsWith("00"))
        {
            optGroup = new XElement("optgroup", new XAttribute("label", topic.Item2));
            select.Add(optGroup);
        }
        // option
        else if (optGroup != null)
        {
            optGroup.Add(new XElement("option", new XAttribute("value", topic.Item1), new XText(topic.Item2)));
        }
    }
}

Console.WriteLine(select);

You’ll get a following console output:

<select>
    <optgroup label="A">
        <option value="010101">B</option>
        <option value="010102">C</option>
        <option value="010103">D</option>
    </optgroup>
    <optgroup label="E">
        <option value="010201">F</option>
        <option value="010202">G</option>
    </optgroup>
</select>