执行以下操作的最佳方法是什么:
带有 COUNTRYies 的下拉列表。国家/地区列表采用 json 格式,从 Web 服务中检索。
根据国家选择显示或预填充状态下拉列表。
这看起来是标准要求,但无法找到合适的解决方案。
如果使用 Sightly,我们现在所做的,调用以 json 格式获取 Country 列表并填充,并根据选择显示 STATES(对于美国)或 PROVINCES(对于加拿大)并执行 Show/Hide。但一直在寻找更好的选择。
<!-- COUNTRY -->
<select class="myContactFieldSelect" id="companyCountry" tabindex="22" name="countryID">
<option value="">Please Select</option>
<div data-sly-list.country="${jHelper.pJSON.countryList}" data-sly-unwrap>
<option value="${jHelper.pJSON.countryList[country].countryID @ context='html'}">
${jsonHelper.parsedJSON.countryList[country].countryLongName @ context='html'}
</option>
</div>
</select>
<!-- STATES or PROVINCES -->
<select class="myContactFieldSelect" id="companyState" tabindex="20" name="stateLongName" style="display: none;">
<option selected="selected" value="">Please Select</option>
<div data-sly-list.state="${jHelper.pJSON.stateListUS}" data-sly-unwrap>
<option>${jHelper.pJSON.stateListUS[state].stateLongName @ context='html'}</option>
</div>
</select>
<!-- OR -->
<select class="myContactFieldSelect" id="companyProvince" tabindex="21" name="provinceLongName" style="display: none;">
<option selected="selected" value="">Please Select</option>
<div data-sly-list.province="${jHelper.pJSON.stateListCA}" data-sly-unwrap>
<option>${jHelper.pJSON.stateListCA[province].stateLongName @ context='html'}</option>
</div>
</select>