选择列表表单中的 jQuery 多级 Accordion 操作

Question

我有一个 html 模板小部件和一个 python 类，调用时基本上会根据已选择的值创建一个“选择”列表。因此，当第一次加载小部件时，STL_template 如下所示:

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

然后，如果用户选择英国，则在下次提交时将重新加载小部件，并将选择名称更改为“地区”:

<select name="region"> 
 <option name="uk#south-east">South East</option>
 <option name="uk#south-west">South West</option>
 ... 
</select>

例如，用户再次选择“东南”，并提交表单，然后加载所有县。

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

这是使这成为可能的Python代码，我正在使用itools [http://git.hforge.org]库:

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'

这工作正常，但我想用 JavaScript 实现此功能，并想了解如何仅使用一个选择选项列表来实现此目的，而不是为每个“国家”、“地区”、“县”提供多个选项？

我正在考虑扩展类 STL_template 文件以包含 onchange，以便:

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>
""")

理想的情况是有一个选择列表，然后当用户选择一个“国家/地区”时，我会得到一个加载所有“地区”的 Accordion 操作，然后当用户选择一个地区时加载所有“县” ' 已列出。

类似于嵌套的 Accordion 列表，但位于选择表单内。

非常感谢任何建议。

Answer 1

我认为您实际上无法嵌套选择标签。选择标记的唯一有效子元素是选项标记。

你可以假装它看起来像是嵌套的(通过有 3 个选择并使用 JS 和一些时髦的样式)。这做起来相当尴尬，而且有点 hacky。

或者，您不能使用 selects(而是使用 ul 标签)和 JavaScript it 来收集输入(通过绑定(bind)到 li 标签的单击事件)。这不太好，因为从语义上讲，它应该使用选择标签来完成。

就我个人而言，我会有三个选择标签。首先，显示其中包含国家/地区的内容。当用户选择一个国家/地区时，动态生成另一个包含适当区域的选择并显示。当用户选择一个区域时，动态生成另一个选择，其中包含适当的县并显示。

如果你真的希望它被嵌套和折叠，我不会使用选择(而是使用 ul 标签或可能 div)。