export default class Select{
? ? //添加css樣式
? ? static ?addCSS(selector,style,title){
? ? ? ? if(title===undefined) title="xietian";
? ? ? ? var arr=Array.from(document.styleSheets);
? ? ? ? var ?styleSheet=arr.reduce(function(value,item){
? ? ? ? ? ? if(item.title===title)return item;
? ? ? ? ? ? return value;
? ? ? ? },null);
? ? ? ? if(!styleSheet){
? ? ? ? ? ? var s=document.createElement("style");
? ? ? ? ? ? s.title=title;
? ? ? ? ? ? document.head.appendChild(s);
? ? ? ? ? ? styleSheet=document.styleSheets[document.styleSheets.length-1];
? ? ? ? }
? ? ? ? var str="";
? ? ? ? for(var prop in style){
? ? ? ? ? ? str+=prop.replace(/[A-Z]/g,function(value){
? ? ? ? ? ? ? ? return "-"+value.toLowerCase();
? ? ? ? ? ? })+":"+(typeof style[prop]==="number" ? style[prop]+"px" : style[prop])+";";
? ? ? ? }
? ? ? ? if(styleSheet.addRule){
? ? ? ? ? ? styleSheet.addRule(selector,str,styleSheet.cssRules.length);
? ? ? ? }else{
? ? ? ? ? ? styleSheet.insertRule(selector+"{ "+str+" }",styleSheet.cssRules.length);
? ? ? ? }
? ? }

//定義全局變量
? ? button;
? ? ul;
? ? class;
? ? constructor(parent,_class) {
? ? ? ? // this.id = _id;
? ? ? ? this.class = _class;
? ? ? ? this.elem = this.createEle();
? ? ? ? this.appendTo(parent);
? ? }
? ? //創(chuàng)建元素
? ? createEle() {
? ? ? ? const div = document.createElement('div');
? ? ? ? div.className = "dropdown " + this.class;
? ? ? ? this.button = document.createElement('button');
? ? ? ? this.button.className = "btn btn-default dropdown-toggle";
? ? ? ? this.button.addEventListener('click',e=>this.clickHander(e))
? ? ? ? this.content = document.createElement('span');
? ? ? ? this.content.innerText = "請(qǐng)選擇";
? ? ? ? const carte = document.createElement('span');
? ? ? ? this.content.className = 'content';
? ? ? ? carte.className = 'carte';
? ? ? ? this.button.appendChild(this.content);
? ? ? ? this.button.appendChild(carte);
? ? ? ? this.ul = document.createElement('ul');
? ? ? ? this.ul.className = "dropdown-menu";
? ? ? ? this.button.appendChild(this.ul);
? ? ? ? div.appendChild(this.button)
? ? ? ? return div;
? ? }
? ? //添加點(diǎn)擊事件
? ? clickHander(e) {
? ? ? ? this.ul.classList.toggle('on');
? ? }
? ?//增加li
? ? addli(list) {
? ? ? ? if(!list) return;
? ? ? ? const frg = document.createDocumentFragment();
? ? ? ? list.forEach(item=>{
? ? ? ? ? ? const li = document.createElement('li');
? ? ? ? ? ? li.innerHTML = item;
? ? ? ? ? ? li.addEventListener('click',e=>this.liHandler(e));

? ? ? ? ? ? frg.appendChild(li);
? ? ? ? })
? ? ? ? this.ul.appendChild(frg);
? ? }
? ? //給li添加的點(diǎn)擊事件
? ? liHandler(e) {
? ? ? ? this.content.innerHTML = e.target.innerText;

? ? }
? ? //添加css樣式
? ? addCSS() {
? ? ? ? Select.addCSS(".dropdown",{
? ? ? ? ? ? position: "relative",
? ? ? ? ? ? boxSizing: "border-box",
? ? ? ? ? ? width: "8.33333333%",
? ? ? ? ? ? display:"inline-block",
? ? ? ? ? ? minHeight: "1px",
? ? ? ? ? ? paddingRight: "15px",
? ? ? ? ? ? paddingLeft: "15px",
? ? ? ? ? ? fontSize: "14px",
? ? ? ? ? ? lineHeight: "1.42857143",
? ? ? ? ? ? color: "#333333",
? ? ? ? })
? ? ? ? Select.addCSS(".btn",{
? ? ? ? ? ? display:'inlineBlock',
? ? ? ? ? ? marginBottom:'0',
? ? ? ? ? ? outline:"none",
? ? ? ? ? ? fontWeight:'normal',
? ? ? ? ? ? textAlign:'center',
? ? ? ? ? ? whiteSpace:'nowrap',
? ? ? ? ? ? verticalAlign:'middle',
? ? ? ? ? ? touchAction:'manipulation',
? ? ? ? ? ? cursor:'pointer',
? ? ? ? ? ? backgroundImage:'none',
? ? ? ? ? ? border:'1px solid transparent',
? ? ? ? ? ? padding:'6px 12px',
? ? ? ? ? ? fontSize:'14px',
? ? ? ? ? ? lineHeight:'1.42857143',
? ? ? ? ? ? borderRadius:'4px',
? ? ? ? ? ? userSelect:'none',
? ? ? ? })
? ? ? ? Select.addCSS(".btn-default",{
? ? ? ? ? ?color:'#333',
? ? ? ? ? ? backgroundColor:'#fff',
? ? ? ? ? ? borderColor:'#ccc',
? ? ? ? })
? ? ? ? Select.addCSS(".btn-default:hover",{
? ? ? ? ? ? color:'#333',
? ? ? ? ? ? backgroundColor:'#e6e6e6',
? ? ? ? ? ? borderColor:'#adadad',
? ? ? ? })
? ? ? ? Select.addCSS(".carte",{
? ? ? ? ? ? display:'inline-block',
? ? ? ? ? ? width:'0',
? ? ? ? ? ? marginLeft: "0",
? ? ? ? ? ? height:'0',
? ? ? ? ? ? verticalAlign:'middle',
? ? ? ? ? ? borderTop:'4px dashed',
? ? ? ? ? ? borderRight:'4px solid transparent',
? ? ? ? ? ? borderLeft:'4px solid transparent',
? ? ? ? })
? ? ? ? Select.addCSS(".dropdown-menu",{
? ? ? ? ? ? position:'absolute',
? ? ? ? ? ? top:'100%',
? ? ? ? ? ? left:'15px',
? ? ? ? ? ? height:'200px',
? ? ? ? ? ? overflowY:'scroll',
? ? ? ? ? ? zIndex:'1000',
? ? ? ? ? ? display:'none',
? ? ? ? ? ? float:'left',
? ? ? ? ? ? minWidth:'83px',
? ? ? ? ? ? padding:'5px 0',
? ? ? ? ? ? margin:'2px 0 0',
? ? ? ? ? ? fontSize:'14px',
? ? ? ? ? ? textAlign:'left',
? ? ? ? ? ? listStyle:'none',
? ? ? ? ? ? backgroundColor:'#fff',
? ? ? ? ? ? backgroundClip:'paddingBox',
? ? ? ? ? ? border:'1px solid #ccc',
? ? ? ? ? ? border:'1px solid rgba(0, 0, 0, 0.15)',
? ? ? ? ? ? borderRadius:'4px',
? ? ? ? ? ? boxShadow:'0 6px 12px rgba(0, 0, 0, 0.175)',
? ? ? ??
? ? ? ? })
? ? ? ? Select.addCSS(".on", {
? ? ? ? ? ? display:"block!important",
? ? ? ? })
? ? ? ? Select.addCSS('li',{
? ? ? ? ? ? textAlign:"center",
? ? ? ? })
? ? ? ? Select.addCSS('li:hover',{
? ? ? ? ? ? backgroundColor:'#e6e6e6',
? ? ? ? })
? ? }
? ? //添加到html結(jié)構(gòu)中的位置
? ? appendTo(parent) {
? ? ? ? if(typeof parent == 'string') parent=document.querySelector(parent);
? ? ? ? parent.appendChild(this.elem);
? ? ? ? this.addCSS();
? ? }

}

<script type="module">
? ? ? ? import Select from "./select.js";
? ? ? ? // var list = ["北京","上海","廣州","深圳","武漢"];

? ? ? ? let citylist,provincelist,countylist,province_content,content_county;

? ? ? ? var sel_p = new Select('.box','province');

? ? ? ? ajax("city.json",(res)=>{
? ? ? ? ? ? ?provincelist = Object.keys(res);
? ? ? ? ? ? sel_p.addli(provincelist);
? ? ? ? ? ? sel_p.elem.addEventListener('click',clickHandler)
? ? ? ? ?province_content = document.querySelector('.province .content');
? ? ? ? ? ? county()?
? ? ? ? })

? ? ? ? var sel_c = new Select('.box','city');

? ? ? ? function clickHandler(e) {
? ? ? ? ? ? if(e.target.constructor!== HTMLLIElement) return;
? ? ? ? ? ? ajax(`http://10.9.72.252:4001/province/?province=${e.target.innerText.trim()}`,function(res){
? ? ? ? ? ? ? ? ?citylist = Object.keys(res.city)
? ? ? ? ? ? ? ? sel_c.addli(citylist);
? ? ? ? ? ? ? ? const province = document.querySelector('.province ul');
? ? ? ? ? ? ? ? province.addEventListener('click',cityHandler);
? ? ? ? ? ? })
? ? ? ? }
? ? ? ??

? ? ? ? function cityHandler(e) {
? ? ? ? ? ? const content_city = document.querySelector('.city .content');
? ? ? ? ? ? const li = document.querySelectorAll('.city li');
? ? ? ? ? ? const content_county ?= document.querySelector('.county .content');
? ? ? ? ? ? content_county.innerText=content_city.innerText = "請(qǐng)選擇";
? ? ? ? ? ? li.forEach(item=>{
? ? ? ? ? ? ? ? item.remove();
? ? ? ? ? ? })
? ? ? ? }
?? ??? ??? ?//獲取區(qū)縣數(shù)據(jù)
? ? ? ?function county() {
? ? ? ? ? ?var sel_conuty = new Select('.box','county');
? ? ? ? ? ?sel_c.elem.addEventListener('click',e=>{
? ? ? ? ? ? if(e.target.constructor!== HTMLLIElement) return;
? ? ? ? ? ? ajax(`http://10.9.72.252:4001/city/?province=${province_content.innerText.trim()}&city=${e.target.innerText.trim()}`,function(res){
? ? ? ? ? ? ? ? // console.log(res);?
? ? ? ? ? ? ? ? countylist =res.county
? ? ? ? ? ? ? ? sel_conuty.addli(countylist);
? ? ? ? ? ? ? ? const city = document.querySelector('.city ul');
? ? ? ? ? ? ? ? city.addEventListener('click',countyHandler);
? ? ? ? ? ? })
? ? ? ? ? ?})
? ? ? ?} ? ?
?? ??? ?
? ? ? ?function countyHandler(e) {
? ? ? ? const lis = document.querySelectorAll('.county li');
? ? ? ? const content_coun = document.querySelector('.county .content');
? ? ? ? content_coun.innerText = "請(qǐng)選擇";
? ? ? ? lis.forEach(item=>{
? ? ? ? ? ? ? ? item.remove();
? ? ? ? ? ? })

? ? ? ?}
? ? ? ?//封裝一個(gè)簡(jiǎn)單的
? ? ? ? function ajax(url, fn) {
? ? ? ? ? ? ? ? // XMLHttpRequest對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)
? ? ? ? ? ? ? ? var xhr = new XMLHttpRequest();
? ? ? ? ? ? ? ? xhr.open('GET', url, true)
? ? ? ? ? ? ? ? xhr.onreadystatechange = function () {
? ? ? ? ? ? ? ? ? ? if(xhr.readyState == 4 && xhr.status ==200) {
? ? ? ? ? ? ? ? ? ? ? ? //從服務(wù)器獲得數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? fn.call(this, JSON.parse(xhr.responseText));
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? //發(fā)送數(shù)據(jù)
? ? ? ? ? ? ? ? xhr.send();
? ? ? ? ? ? }
</script>

const http = require('http');
const querystring= require('querystring');
const city = require("../city.json");
const server = http.createServer(function(req, res) {
? ? res.writeHead(200,{
? ? ? ? "content-type":"text/html;charset=utf-8",
? ? ? ? "Access-Control-Allow-Origin":"*",
? ? ? ? "Access-Control-Allow-Headers":"*",
? ? ? ? //請(qǐng)求頭跨域 如果請(qǐng)求頭發(fā)生修改并且非同源，就需要申請(qǐng)請(qǐng)求頭跨域
? ? });
? ? req.on('data',function(_data) {
? ? ? ? data=_data
? ? })
? ? req.on('end',function () {
? ? ? ? // type是接口名稱(chēng)
? ? ? ? console.log(req.url);
? ? ? ? var type=req.url.trim().split("?")[0].replace(/\//g,"");
? ? ? ? console.log(type);
? ? ? ? if(req.method.toLowerCase()==="get"){
? ? ? ? ? ? if(req.url.includes("favicon.ico")) return res.end();//如果get請(qǐng)求的是圖標(biāo)直接返回空跳出
? ? ? ? ? ? // 如果是get請(qǐng)求，就從url中重新獲取數(shù)據(jù)存入data變量
? ? ? ? ? ? data=req.url.includes("?") ? req.url.split("?")[1] : "";
? ? ? ? }
? ? ? ? // 首先判斷是否可以通過(guò)JSON解析，如果通過(guò)JSON直接轉(zhuǎn)換，如果不能就是querystring解析
? ? ? ? try{
? ? ? ? ? ? data=JSON.parse(data);
? ? ? ? }catch(e){
? ? ? ? ? ? data=data ? querystring.parse(data) : {};
? ? ? ? ? ? console.log(data);

? ? ? ? }
? ? ? ? let o = {}
? ? ? ? switch(type){
? ? ? ? ? ? case 'province':
? ? ? ? ? ? ? ? o = {};
? ? ? ? ? ? ? ? o.city = obj[data.province];
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 'city':
? ? ? ? ? ? ? ? o.city = obj[data.province];
? ? ? ? ? ? ? ? o.county = o.city[data.city];
? ? ? ? ? ? ? ? break;
? ? ? ? }
? ? ? ? res.write(JSON.stringify(o));
? ? ? ? res.end();
? ? })
})
//監(jiān)聽(tīng)4001端口
server.listen(4001,"你的地址",function() {
? ? console.log("服務(wù)器開(kāi)啟成功^_^");
})