<!--这是易优留言地区联动应用-->
    <link rel="stylesheet" type="text/css" href="/sta6021/css/style.css" />
		<style>
			.formarea li a{line-height: 2.62rem; color: #989898; display: block;}
			textarea{border: none;width:100%;display: block;margin: auto;}
	
			.picker .picker-panel .picker-choose .picker-title{font-size: .3rem;}
			.picker .picker-panel .wheel-wrapper .wheel .wheel-scroll .wheel-item{font-size: .3rem;}
		</style>
		
		{eyou:guestbookform typeid='44' type='default'}
		<form method="POST" class="am-form am-form-horizontal form-add" action="{$field.action}" {$field.formhidden} onsubmit="{$field.submit}">
		
		<ul class="formarea">
<span style=" text-align: center; display: block; color: #22bf75; font-weight: bold; font-size: 18px; padding: 17px; ">青少年问题 - 免费咨询</span>
<li style="">
				<label class="lit">姓名 <span style=" color: #f10000; ">*</span></label>
				<input type="text" placeholder="请输入您的姓名" class="textbox"  name="{$field.attr_2}" id="attr_2" />
			</li>
			<li>
				<label class="lit">手机 <span style=" color: #f10000; ">*</span></label>
				<input type="text" placeholder="请输入您的手机号" class="textbox" name="{$field.attr_3}" id="attr_3" />
			</li>
			<li>
				<label class="lit">城市 <span style=" color: #f10000; ">*</span></label>
				<a href="#" class="btn btn-info btn-lg active textbox" role="button" id="sel_city">请选择所在地区</a>
			</li>
			<!--把选择的地区，赋值到input-->
			<input type="text" placeholder="" class="textbox" name="{$field.attr_5}" id="attr_5"  style="display:none"  />
			
		</ul>
<button type="submit" class="bt" onclick="return checkPhone2()" style="width: 79%;color: #ffffff;border: none;font-size: 1.5rem;background: linear-gradient( to right,#24bc65,#17d130);height: 4rem;border-radius: 50rem;margin: 2px auto 15px auto;display: block;">免费评估诊断</button>
		{$field.hidden}
		</form>
		    {/eyou:guestbookform} 
		
		<script>
function checkPhone2(){
    var buyerName =document.getElementById('sel_city').innerText;
    document.getElementById('attr_5').value=buyerName;
    var phone = document.getElementById('attr_3').value;
    if(!(/^1[3456789]d{9}$/.test(phone))){ 
        alert("手机号码有误，请重填");  
        return false;
    }
}
</script>
		
		<script src="/sta6021/js/picker.min.js"></script>
		<script src="/sta6021/js/city.js"></script>
		<script>
		var nameEl = document.getElementById('sel_city');
		
		var first = []; /* 省，直辖市 */
		var second = []; /* 市 */
		var third = []; /* 镇 */
		
		var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */
		
		var checked = [0, 0, 0]; /* 已选选项 */
		
		function creatList(obj, list){
		  obj.forEach(function(item, index, arr){
		  var temp = new Object();
		  temp.text = item.name;
		  temp.value = index;
		  list.push(temp);
		  })
		}
		
		creatList(city, first);
		
		if (city[selectedIndex[0]].hasOwnProperty('sub')) {
		  creatList(city[selectedIndex[0]].sub, second);
		} else {
		  second = [{text: '', value: 0}];
		}
		
		if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
		  creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
		} else {
		  third = [{text: '', value: 0}];
		}
		
		var picker = new Picker({
		    data: [first, second, third],
		  selectedIndex: selectedIndex,
		    title: '地址选择'
		});
		
		picker.on('picker.select', function (selectedVal, selectedIndex) {
		  var text1 = first[selectedIndex[0]].text;
		  var text2 = second[selectedIndex[1]].text;
		  var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
		
		    nameEl.innerText = text1 + ' ' + text2 + ' ' + text3;
		});
		
		picker.on('picker.change', function (index, selectedIndex) {
		  if (index === 0){
		    firstChange();
		  } else if (index === 1) {
		    secondChange();
		  }
		
		  function firstChange() {
		    second = [];
		    third = [];
		    checked[0] = selectedIndex;
		    var firstCity = city[selectedIndex];
		    if (firstCity.hasOwnProperty('sub')) {
		      creatList(firstCity.sub, second);
		
		      var secondCity = city[selectedIndex].sub[0]
		      if (secondCity.hasOwnProperty('sub')) {
		        creatList(secondCity.sub, third);
		      } else {
		        third = [{text: '', value: 0}];
		        checked[2] = 0;
		      }
		    } else {
		      second = [{text: '', value: 0}];
		      third = [{text: '', value: 0}];
		      checked[1] = 0;
		      checked[2] = 0;
		    }
		
		    picker.refillColumn(1, second);
		    picker.refillColumn(2, third);
		    picker.scrollColumn(1, 0)
		    picker.scrollColumn(2, 0)
		  }
		
		  function secondChange() {
		    third = [];
		    checked[1] = selectedIndex;
		    var first_index = checked[0];
		    if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
		      var secondCity = city[first_index].sub[selectedIndex];
		      creatList(secondCity.sub, third);
		      picker.refillColumn(2, third);
		      picker.scrollColumn(2, 0)
		    } else {
		      third = [{text: '', value: 0}];
		      checked[2] = 0;
		      picker.refillColumn(2, third);
		      picker.scrollColumn(2, 0)
		    }
		  }
		
		});
		
		picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
		  console.log(selectedVal);
		  console.log(selectedIndex);
		});
		
		nameEl.addEventListener('click', function () {
		    picker.show();
		});
		</script>

附件：    sta6021.zip