선택 목록 양식 내에서 jQuery 다중 레벨 아코디언 동작

Question

나는 html 템플릿 위젯과 파이썬 클래스를 가지고 있는데, 호출 될 때 기본적으로 선택된 값을 기반으로 '선택'목록을 만듭니다. 위젯을 처음로드 할 때 그래서, 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하고 각 국가, 지역, 카운티에 대해 여러 개가 아닌 하나의 선택 옵션 목록만으로이 작업을 수행하는 방법에 대한 아이디어가 있습니까? 이상적인 일 무슨

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

하나 개의 선택 목록을 가지고하는 것입니다, 다음 사용자는 '국가'를 선택하면, :

나는 있도록, onchange를 포함하는 클래스 stl_template 파일을 확장 할 생각 그러면 모든 '지역'을로드하는 아코디언 액션이 발생하고 사용자가 지역을 선택하면 '카운티'가 모두 나열됩니다.

중첩 된 아코디언 목록과 비슷하지만 선택 양식 내에 있습니다.

많은 조언을 주시면 감사하겠습니다.

Answer 1

실제로 선택 태그를 중첩시킬 수 있다고 생각하지 않습니다. select 태그의 유일한 유효한 자식 요소는 option 태그입니다.

중첩 된 것처럼 보이도록 가짜로 만들 수 있습니다 (JS를 선택하고 JS를 사용하고 펑키 스타일링을 사용함). 이것은 약간 어색하고 다소 해킹 될 것입니다.

또는 li 태그의 click 이벤트에 바인딩하여 select (ul 태그 대신) 및 JavaScript를 사용하여 입력을 수집 할 수 없습니다. 이는 의미 상으로 선택 태그를 사용하여 수행해야합니다.

개인적으로 세 개의 선택 태그가 있습니다. 첫째로, 그것에있는 국가를 가진 사람을 보여주십시오. 사용자가 국가를 선택하면 해당 지역이있는 다른 선택을 동적으로 생성하여 표시합니다. 사용자가 지역을 선택하면 해당 카운티가있는 다른 선택을 동적으로 생성하여 표시합니다.

실제로 내포 된 &을 accordioned으로 지정하려면 select (대신 ul 태그 또는 div 사용)를 사용하지 않을 것입니다.