Populate Drop Down List with XML Node Distinct Values Only

Question

I'm trying to produce a search filter that will work with an existing XML data file and I'm starting with trying to display just unique values from one of the nodes in a drop down list box.

An example of the XML file can be seen at... http://kirk.rapweb.co.uk/testing/filter/tidy/plain/products.xml

I've managed to use XSLT to display the XML in a more readable format... http://kirk.rapweb.co.uk/testing/filter/tidy/products.xml

The same data with filter applied... http://kirk.rapweb.co.uk/testing/filter/tidy/filter/products.xml

The values I would like to list in the 1st drop down list box filtered out... http://kirk.rapweb.co.uk/testing/filter/tidy/distinct/products.xml

All the data pulled into a HTML page... http://kirk.rapweb.co.uk/testing/filter/tidy/html/

I'm struggling to work out how to get the data from... http://kirk.rapweb.co.uk/testing/filter/tidy/distinct/products.xml into a HTML page drop down list box.

Can anyone offer advice, point me in the right direction or confirm that I'm on the right track?

The end result that I'm trying to achieve is to have 2 drop down boxes.

Drop Down List 1 would contain... Brakes, Exhaust, Lighting

Drop Down List 2 would contain...

• If Brakes were selected previously... Discs and Drums, Pads and Shoes.
• If Exhaust were selected previously... Centre, Rear.
• If Lighting were selected previously... Headlamps, Rear Lights.

Right now I'd just like to focus on populating Drop Down Box 1 with the data discussed above.

Answer 1

With your updated decription it looks like you want to create a dropdown with the distinct group values. This is an example of a grouping problem and in XSLT 1.0, the way to do this is with a technique called Muenchian grouping. It goes like this:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" omit-xml-declaration="yes"/>
  <xsl:key name="kGroup" match="product" use="group"/>

  <xsl:template match="/">
    <select name="productGroup" id="productGroup">
      <xsl:apply-templates 
        select="dataroot/product[generate-id() = 
                                 generate-id(key('kGroup', group)[1])]" />
    </select>
  </xsl:template>

  <xsl:template match="product">
    <option value="{group}">
      <xsl:value-of select="group"/>
    </option>
  </xsl:template>
</xsl:stylesheet>

When run on your input XML, it produces this:

<select name="productGroup" id="productGroup">
  <option value="Brakes">Brakes</option>
  <option value="Exhaust">Exhaust</option>
  <option value="Lighting">Lighting</option>
</select>

Then you would use the same JavaScript as you're using now to put the result inside a particular element in the HTML DOM that can be easily found by its ID.

Now as for the next step, once the above is working, you would put a JavaScript event on this dropdown so that it runs another transform when an item is selected. You would get this selected value and then you can pass this into yet another XSLT as a parameter value. This page has good information on passing parameters into an XSLT in JavaScript. The XSLT would look like this (yet again with Muenchian grouping):

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" omit-xml-declaration="yes"/>
  <xsl:key name="kType" match="product" use="type"/>

  <xsl:param name="group" />

  <xsl:template match="/">
    <select name="productType" id="productType">
      <xsl:apply-templates 
        select="dataroot/product[generate-id() = 
                     generate-id(key('kType', type)[1])][group = $group]" />
    </select>
  </xsl:template>

  <xsl:template match="product">
    <option value="{type}">
      <xsl:value-of select="type"/>
    </option>
  </xsl:template>
</xsl:stylesheet>

When the parameter value "Lighting" is passed in as the group parameter and this is run on your input XML, this produces:

<select name="productType" id="productType">
  <option value="Headlamps">Headlamps</option>
  <option value="Rear Lights">Rear Lights</option>
</select>