jQuery многоуровневое аккордеонное действие в форме списка выбора

Question

У меня есть виджет шаблона html и класс python, при вызове в основном создается список 'select' на основе выбранного значения. Поэтому, когда виджет загружается в первый раз, 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> 

Вот питон код, который делает это возможным, я с помощью 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

Не думаю, что на самом деле вы можете вставить теги select. Единственным допустимым дочерним элементом тега select является тег опции.

Вы могли бы подделать его так, чтобы они были вложенными (имея 3 выбора и используя JS и некоторые напуганные стили). Это было бы довольно неудобно делать и немного взломать.

В качестве альтернативы вы не можете использовать select (вместо этого используйте теги ul) и JavaScript для сбора ввода (путем привязки к событию click тегов li). Это не очень приятно, так как семантически, это нужно делать с помощью избранных тегов.

Лично у меня было бы три тэга select. Прежде всего, покажите тот, в котором есть страны. Когда пользователь выбирает страну, динамически генерирует другой выбор с соответствующими регионами в нем и показывается. Когда пользователь выбирает регион, динамически генерирует другой выбор с соответствующими округами в нем и показывается.

Если вы действительно хотите, чтобы он был вложен & аккордеон, я бы не использовал selects (вместо этого использовал теги ul или, возможно, divs).