input+div模拟select效果

最新推荐文章于 2019-04-28 18:00:19 发布

zhituji

最新推荐文章于 2019-04-28 18:00:19 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript dreamweaver 编程

本文链接：https://blog.csdn.net/zhituji/article/details/49340035

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html

<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="font-family:Times New Roman;"><body onLoad=""autoOnLoad();">
    <input id="nation" name="nation"  placeholder="请选择民族" onClick="Display(nationList);" />
    <div id="nationList" name="nationList" οnmοuseοver="changeBackgroundColor('nationList');"></div>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/register.js"></script>
 </body></span>
</span>

function autoOnLoad(){
	 createNationList(14,4); 
	 returnValue("nationList","nation");
	
 }

/*select nation */
function createNationList(rowCount,cellCount)
  { 
   var i,j;
   var nation=new Array(  ['汉族','蒙古族','彝族','侗族'],['哈萨克族', '畲族','纳西族','仫佬族'],['仡佬族','怒族','保安族', '鄂伦春族'],['回族','壮族','瑶族','傣族'],
                          ['高山族', '景颇族','羌族','锡伯族'],['乌孜别克族','裕固族','赫哲族', '藏族'],['布依族','白族','黎族','拉祜族'],['柯尔克孜族','布朗族','阿昌族','俄罗斯族'],
                          ['京族','门巴族','维吾尔族','朝鲜族'], [ '土家族','傈僳族','水族','土族'], ['撒拉族','普米族','鄂温克族', '塔塔尔族'],['珞巴族','苗族','满族','哈尼族'],
                          ['佤族','东乡族','达斡尔族','毛南族'], ['塔吉克族','德昂族','独龙族','基诺族']);
    var table=$("<table>");
     table.id="nationTable";
     table.appendTo($("#nationList"));
     for(i=0;i<rowCount;i++)
     {
        var tr=$("<tr></tr>");
        tr.appendTo(table);
        for( j=0;j<cellCount;j++)
        {    
           var td=$("<td>"+nation[i][j]+"</td>");
           td.width("100px");
           td.appendTo(tr);        
        }
     }
     $("#nationList").append("</table>");
  }

/* return value to input and than colse the List */
function returnValue(listDiv,inputValue){
    var div= document.getElementById(listDiv);
    var tds = div.getElementsByTagName("td"); 
    var input=document.getElementById(inputValue);     
      for (var i = 0; i < tds.length; i++) {  
        tds[i].onclick = function() {  
       input.value=this.innerHTML;
       div.style.display = "none";   
        }  
    }   
} 

/*div display*/
 function Display(divDisplay){
    var Display=document.getElementById("divDisplay");
       if(divDisplay.style.display != "block"){
          divDisplay.style.display = "block";         
         }else{
           divDisplay.style.display = "none";
            }
        }

/*onmouseover change cell backgroundColor*/
  function changeBackgroundColor(M){
    var div= document.getElementById(M);
    var tds = div.getElementsByTagName("td");     
     for (var i = 0; i < tds.length; i++) {  
        tds[i].onmouseover = function() {  
            this.style.background = '#FC0';  
        }  
        tds[i].onmouseout = function() {  
            this.style.background = '#fff';  
       }  
    }  
}

出现的问题: