html弹窗怎么加选择,利用javaScript实现点击输入框弹出窗体选择信息

点击弹出DIV选择信息

//数组信息

var arrs = new Array();

arrs.push({id:"1", name:"张三3"});

arrs.push({id:"2", name:"李四3"});

arrs.push({id:"3", name:"申午武3"});

arrs.push({id:"4", name:"周琬淞3"});

arrs.push({id:"5", name:"覃晓为3"});

arrs.push({id:"6", name:"王五"});

arrs.push({id:"7", name:"宝典3"});

/**

* obj: 点击文本框的对象

* idStr: json数组的id键名

* nameStr: json数组的name键名

* bool:  true:表示追加 false:表示重新赋值

* boolSet: true:ID和Name的值都显示 false:只显示Name的值

* widthNum: 信息DIV的宽度

* heightNum: 信息DIV的高度

* arrName: 数组名称

*/

function alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){

obj.blur();

if(!widthNum){

widthNum = 600;

}

if(!heightNum){

heightNum = 350;

}

//创建大的DIV

var alertDivParent = document.createElement("div");

alertDivParent.id = "alertDivParent";

with(alertDivParent.style){

top = 0;

left = 0;

position = "absolute";

background = "#EEEEEE";

filter  = "alpha(opacity=70)";

opacity = 0.7;

width  = Math.max(document.body.clientWidth, document.body.scrollWidth);

height  = Math.max(document.body.clientHeight, document.body.scrollHeight);

}

document.body.appendChild(alertDivParent);

//创建小的DIV

var alertDiv = document.createElement("div");

alertDiv.id = "alertDiv";

with(alertDiv.style){

width = widthNum;

height = heightNum;

position = "absolute";

background = "#DDDDDD";

left  = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;

top  = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;

}

//添加到窗体

document.body.appendChild(alertDiv);

//创建搜索的DIV

var alertQueryDiv = document.createElement("div");

alertQueryDiv.id = "alertQueryDiv";

//将搜索的DIV添加到信息DIV

alertDiv.appendChild(alertQueryDiv);

alertQueryDiv.innerHTML = "搜索   名称：";

//创建文本框

var alertQueryINPUT = document.createElement("input");

alertQueryINPUT.id = "alertQueryINPUT";

alertQueryINPUT.type = "text";

//将文本框添加到搜索的DIV

alertQueryDiv.appendChild(alertQueryINPUT);

//创建搜索按钮

var alertQueryBUTTON = document.createElement("input");

alertQueryBUTTON.id = "alertQueryBUTTON";

alertQueryBUTTON.type = "button";

alertQueryBUTTON.value = " 搜 索 ";

//给按钮添加事件

alertQueryBUTTON.onclick = function(){

//计算该宽度可放多少单元格

var tdWidthNum = 130;

var tdNum = parseInt(widthNum / tdWidthNum);

var num = 0;

var j = 0;

//获取显示信息的Table

var alertInfoTab = document.getElementById("alertInfoTab");

//清空THead的信息

alertInfoTab.deleteTHead();

//循环数组

for(var i = 0; i < eval(arrName).length; i ++){

//如果与数组中的相等就添加到TABLE

if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){

var header;

if(j % tdNum == 0){

header = alertInfoTab.createTHead();

header = header.insertRow(num);

num ++;

}

j ++;

var headerName = header.insertCell(-1);

with(headerName.style){

width = tdWidthNum;

color = "blue";

cursor = "pointer";

}

if(boolSet)

headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));

else if(!boolSet)

headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));

headerName.onclick = function(){

if(bool)

obj.value = obj.value + this.innerHTML + ";";

else if(!bool)

obj.value = this.innerHTML;

//移除弹出的窗体

document.body.removeChild(alertDiv);

document.body.removeChild(alertDivParent);

};

}

}

};

//将按钮添加到搜索的DIV

alertQueryDiv.appendChild(alertQueryBUTTON);

//创建清空按钮

var alertClearBUTTON = document.createElement("input");

alertClearBUTTON.id = "alertClearBUTTON";

alertClearBUTTON.type = "button";

alertClearBUTTON.value = " 清 空 ";

alertClearBUTTON.onclick = function(){

//给文本框赋空值

obj.value = "";

//移除弹出的窗体

document.body.removeChild(alertDiv);

document.body.removeChild(alertDivParent);

};

//将按钮添加到搜索的DIV

alertQueryDiv.appendChild(alertClearBUTTON);

//创建关闭按钮

var alertCancelBUTTON = document.createElement("input");

alertCancelBUTTON.id = "alertCancelBUTTON";

alertCancelBUTTON.type = "button";

alertCancelBUTTON.value = " 关 闭 ";

alertCancelBUTTON.onclick = function(){

//移除弹出的窗体

document.body.removeChild(alertDiv);

document.body.removeChild(alertDivParent);

};

//将按钮添加到搜索的DIV

alertQueryDiv.appendChild(alertCancelBUTTON);

//创建显示信息的Table

var alertInfoTab = document.createElement("table");

alertInfoTab.id = "alertInfoTab";

with(alertInfoTab.style){

margin = 20;

}

//计算该宽度可放多少单元格

var tdWidthNum = 130;

var tdNum = parseInt(widthNum / tdWidthNum);

var num = 0;

for(var i = 0; i < eval(arrName).length; i ++){

var header;

if(i % tdNum == 0){

header = alertInfoTab.createTHead();

header = header.insertRow(num);

num ++;

}

var headerName = header.insertCell(-1);

with(headerName.style){

width = tdWidthNum;

color = "blue";

cursor = "pointer";

}

//var headerType = header.insertCell(-1);

if(boolSet)

headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));

else if(!boolSet)

headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));

//headerType.appendChild(document.createTextNode("Type"));

headerName.onclick = function(){

if(bool)

obj.value = obj.value + this.innerHTML + ";";

else if(!bool)

obj.value = this.innerHTML;

//移除弹出的窗体

document.body.removeChild(alertDiv);

document.body.removeChild(alertDivParent);

};

}

//将table添加到显示信息的DIV

alertDiv.appendChild(alertInfoTab);

}