input+div模拟select效果

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>

js

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';  
       }  
    }  
}


 

出现的问题:

  • 给<td>赋值,刚开始写的一维数组,实在不懂赋值,改写成二维数组,不过在生成表格包含在指定的div中 也没想好怎么改成可以重用的函数。
  • <input />是没有onLoad属性的,之前一直这样调用没效果。
  • tds[i].onclick,触发函数的事件中onclick 写成“onClick"。
  • input是单标签取值赋值用的是input.value像<td>是用td.innerHTML。




  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值