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

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

<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_模板文件以包含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>
""")

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

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

---

非常感谢您的建议。

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

通过3次选择，使用JS和一些时髦的样式，你可以假装它们是嵌套的。这将是相当尴尬的做法和有点黑客

或者，您不能使用selects，而是使用ul标记和JavaScript it通过绑定到li标记的click事件来收集输入。这不是很好，因为在语义上，它应该用select标记来完成

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

---

如果你真的希望它被嵌套和整理，我不会使用select，而是使用ul标签或者div。

我认为你实际上不能嵌套select标签。选择标记的唯一有效子元素是选项标记

通过3次选择，使用JS和一些时髦的样式，你可以假装它们是嵌套的。这将是相当尴尬的做法和有点黑客

或者，您不能使用selects，而是使用ul标记和JavaScript it通过绑定到li标记的click事件来收集输入。这不是很好，因为在语义上，它应该用select标记来完成

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

---

如果你真的希望它是嵌套和折叠的，我不会使用selects，而是使用ul标签或DIV。

3个下拉列表不是更好的用户体验吗。OOPs选择了错误的一个，但现在正确的一个不再在列表中。您还可以使用.live或.delegate，这样就可以分隔更改代码。最后一个选项没有onchange事件，是吗？我认为这是一个真正的事件选择。3个下拉菜单不是更好的用户体验吗。OOPs选择了错误的一个，但现在正确的一个不再在列表中。您还可以使用.live或.delegate，这样就可以分隔更改代码。最后一个选项没有onchange事件，是吗？我认为这是真正发生这件事的原因。