JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="cityinput" id="city1" value="城市名">
<br/>

<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<input type="text" class="cityinput" id="city2" value="城市名">
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
<select name="IE6">
    <option>1</option>
    <option>2</option>
  ...

CSS

*{margin: 0;padding: 0}

       /*弹出城市列表*/
      div#popCity{ visibility: hidden; font: 13px Arial;position: absolute;top: 0;left: 0;background-color: #fff; box-shadow: 2px 2px 3px rgba(0,0,0,0.3);border: 1px solid #85BEE5;width: 400px;}
      div#popCity h1{font-size: 14px;background-color:#85BEE5;padding: 5px;color: #fff; } 
      ul#popMenu{margin-top: 5px;overflow: hidden;zoom:1;}
      ul#popMenu li{display: block;float:left;margin-left:5px; cursor: pointer; font: 13px Arial;border: 1px solid #85BEE5;background-color: #e1effe;padding: 2px 5px;height: 16px;}
      ul#popMenu li.active{background-color: #fff;border-bottom: 1px solid #fff;position: relative;}
      div#popCityCon{border-top: 1px solid #85BEE5;margin-top: -1px;padding: 5px 0;}
      div#popCityCon div{display: none;}
      div#popCityCon div.active{display: block;}
      div#popCityCon dl{overflow: hidden;margin:2px 0;overflow: hidden;}
      div#popCityCon dt{float: left;width: 50px;text-align: center;color: #666;}
      div#popCityCon dd{float: left;width: 350px;}
      div#popCityCon a{ cursor: pointer;padding: 2px 5px;color: #3b5998;display: inline-block;}
      div#popCityCon a:hover{background-color: orange;color: #fff;}
      div#popCityCon a.active{background-color: orange;color: #fff;}
      div#popCityCon div.active{display: block;}

      /*搜索提示框*/
      #popList{ visibility: visible;border: 1px solid #ccc;font: 14px Arial;background-color: #fff;position: absolute;}
      #popList ul{width: 100%;list-style-type: none;}
      #popList ul li{padding: 5px;}
      #popList ul li:hover{background-color: #ececec;cursor:default; }
      #popList ul li.active{background-color: #ececec;cursor:default; }

JavaScript

var _CalF = {
   $ : function(object){//选择器
     if(object === undefined ) return;
     var getArr = function(name,tagName,attr){
           var tagName = tagName || '*',
               eles = document.getElementsByTagName(tagName),
               clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
               attr = attr || clas,
               Arr = [];
           for(var i=0;i<eles.length;i++){
             if(eles[i].getAttribute(attr)==name){
               Arr.push(eles[i]);
             }
           }
           return Arr;
         };
   
     if(object.indexOf('#') === 0){  //#id 
       return document.getElementById(object.substring(1));
     }else if(object.indexOf('.') === 0){  //.class
       return getArr(object.substring(1));
     }else if(object.match(/=/g)){  //attr=name
       return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
     }else if(object.match(/./g)){ //tagName.className
       return getArr(object.split('.')[1],object.split('.')[0]);
     }
   },
   addHandler:function(node, type, handler){
       node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
   },
   removeHandler: function (node, type, handler) {
       node.removeEventListener ? node.removeEventListener(type, handler, false) : node.detachEvent("on" + type, handler);
   },
   getPosition : function(obj) { //获取元素在页面里的位置和宽高
      var top = 0,
          left = 0,
          width = obj.offsetWidth,
          height = obj.offsetHeight;
  
      while(obj.offsetParent){
          top += obj.offsetTop;
          left += obj.offsetLeft;
          obj = obj.offsetParent;
      }
  
      return {"top":top,"left":left,"width":width,"height":height};
   },
   addClass:function(c,node){  // 添加样式名
       node.className = node.className + ' ' + c;
   },
   removeClass:function(c,node){ // 移除样式名
       var reg = new RegExp("(^|\\s+)" + c +...