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这个功能，并且只有一个选择选项列表有一些关于如何做到这一点的想法，而不是每个'country'，'region'，'county'有多个？ / p>

我正在考虑扩展类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

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

你可以假装它看起来像是嵌套的（通过3选择并使用JS和一些时髦的造型）。这样做有点尴尬，而且有点笨拙。

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

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

如果你真的希望它嵌套＆amp;手风琴，我不会使用选择（而是使用ul标签或div）。

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

1 个答案: