<!--国家地区联动-->
<div class="component-section no-code bd-0">
	<h5 id="section6" class="tx-semibold">AJAX国家地区联动</h5>
    <p class="mg-b-25">系统内已有国家地区的相应变量，利用ajax重新加载国家地区联动 $countries,$states</p>
	<div class="wd-md-50p">
   		<!--选择国家-->
   		<div class="form-group mg-t-10">
			<label for="address_province">COUNTRY <sup>*</sup></label>
			<select class="custom-select openzc-select" data-action="getState" data-reload="ajaxState">
				{openzc:var name="$countries"}
				<option value="[field:id/]" {openzc:if $field['status']=="active"}selected=""{/openzc:if}>[field:text/]</option>
				{/openzc:var}
			</select>
		</div>
        {openzc:ajax filename="ajaxState"}
        <div class="form-group mg-t-10">
			<label for="address_province">STATE/PROVINCE <sup>*</sup></label>
			<!--判断有地区列表显示select，否则显示input输入框-->
			{openzc:if count($states)>1}
			<select id="address_province" name="zone_id" class="form-control">
				{openzc:var name="$states"}
				<option value="[field:id/]">[field:text/]</option>
				{/openzc:var}
			</select>
			{else}
			<input type="text" name="state" class="form-control" placeholder="Please enter your Province ..." size="33"/>
			{/openzc:if}
		</div>
        {/openzc:ajax}
	</div>
</div>

<!--引入ajax通用文件openzc.js-->
<script src="/includes/templates/template_doc/html/modules/assets/js/openzc.js"></script>