jQuery multiple level accordion action within a select list form

i have an html template widget and a python class, when called basically creates a 'select' list based on the value that has been selected. So when the widget is loaded for the first time, the stl_template is like:

<select name="country"> 
 <option name="uk">United Kingdom</option>
 <option name="fr">France</option>
 ... 
</select>

then if the user select United Kingdom, on the next submit the widget is reloaded and the select name is changed to 'region':

<select name="region"> 
 <option name="uk#south-east">South East</option>
 <option name="uk#south-west">South West</option>
 ... 
</select&开发者_JAVA技巧gt;

and again a user for example selects 'South East', and submits the form this then loads all the counties.

<select name="county"> 
 <option name="uk#south-east#surrey">Surrey</option>
 <option name="uk#south-east#west-sussex">West Sussex</option>
 ... 
</select>

Here is the python code that makes this possible, i am using the itools [http://git.hforge.org] library:

class RegionSelect(Widget):

"""
We return Country/Region/County list for non javascript enabled browsers
"""

template = make_stl_template("""
<dd>
    <select id="${county}" name="${county}">
        <option stl:repeat="option options" value="${option/name}"
                selected="${option/name}">
        ${option/value}
        </option>
    </select>
</dd>
""")

@classmethod
def options(cls):
    context = get_context()
    country = context.get_form_value('country') or get_host_prefix(context) # returns a string like 'uk'
    region = context.get_form_value('region') # returns a string like 'uk#south-east'

    iana_root_zone = country or region
    if iana_root_zone:
        if region:
            # get the country_code
            iana_root_zone, region = region.rsplit('#', 1)
            options = getCounties().get_options(iana_root_zone, region)
            has_empty_value = 'Select your county'
        else:
            options = getRegions().get_options(iana_root_zone)
            # {'name': 'uk#south-east', 'value': u'South East', 'name': 'uk#south-west', 'value': u'South West'}
            has_empty_value = 'Select your region'
    else:
        options = getCountries().get_options()
        # {'name': 'uk', 'value': u'United Kingdom', 'name': 'fr', 'value': u'France'}
        has_empty_value = 'Select your country/region/county'

    if cls.has_empty_option:
        options.insert(0,
            {'name': '', 'value': has_empty_value, 'selected': True})
    return options

@classmethod
def county(self):
    context = get_context()
    host_prefix = get_host_prefix(context)
    country = context.get_form_value('country')
    region = context.get_form_value('region')
    county = context.get_form_value('county')
    if host_prefix and region or country and region or region:
        return 'county'
    elif host_prefix or country or host_prefix and country:
        return 'region'
    else:
        return 'country'

This works fine, but I would like to javascript this functionality and to have some ideas on how to do this with only one select option list rather then have multiple for each 'country', 'region', 'county'?

I was thinking to extend the class stl_template file to include an onchange, so that:

template = make_stl_template("""
<dd>
    <select id="${county}" name="${county}">
        <option stl:repeat="option options" value="${option/name}"
                selected="${option/name}
                onchange="javascript: get_regions('/;get_counties_str?${county}='+ this.value, '${county}')"">
        ${option/value}
        </option>
    </select>
</dd>
""")

what will be ideal would be to have one select list, then when the user selects a 'country', then i get an accordion action which loads all the 'regions' and then when a user selects a region all the 'counties' are listed.

something like a nested accordion list but within an select form.

any advice much appreciated.

I don't think you can actually nest the select tags. The only valid child element of a select tag is an option tag.

You could fake it to look like they are nested (by having 3 selects and using JS and some funky styling). This would be rather awkward to do and a bit hacky.

Alternatively, you could not use selects (instead using ul tags) and JavaScript it to gather input (by binding to the li tags' click event). This isn't very nice, as semantically, it should be done with select tags.

Personally, I would have three select tags. First off, show the one with the countries in it. When a user selects a country, dynamically generate another select with the appropriate regions in it and show. When a user selects a region, dynamically generate another select with the appropriate counties in it and show.

If you really want it to be nested & accordioned, I would not use selects (instead using ul tags or maybe divs).