选择列表表单中的 jQuery 多级手风琴操作

Question

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

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

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

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

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

类似于嵌套的手风琴列表，但位于选择表单中。

非常感谢任何建议。

Answer 1

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

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

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

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

如果你真的想要它被嵌套&手风琴式的，我不会使用选择（而是使用 ul 标签或可能是 div）。