1.如上效果
2.代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.search {
background-color: #CCC;
width:500px;
height:150px;
border-radius:8px;
}
</style>
<script>
function insert()
{
var obj = document.getElementById("field"); //定位id
var index = obj.selectedIndex; // 选中索引
var text1 = obj.options[index].text; // 选中文本
var value1 = obj.options[index].value; // 选中值
var obj = document.getElementById("operation"); //定位id
var index = obj.selectedIndex; // 选中索引
var text2 = obj.options[index].text; // 选中文本
var value2 = obj.options[index].value; // 选中值
text3 = document.getElementById("field_value").value;
document.getElementById("sql").value +=" "+ value1 + " " + value2 +" "+"\'"+text3+"\'";
document.getElementById("search_selected").innerHTML += " "+text1+" " + text2 +" "+ text3+"<br />";
};
function add(){
var obj = document.getElementById("add"); //定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值
document.getElementById("search_selected").innerHTML += text+"<br />";
document.getElementById("sql").value += " "+value+" ";
}
</script>
</head>
<body>
<div class="search">
<table width="510" border="0" cellspacing="5" cellpadding="1" style="font-size:12px;">
<tr>
<td colspan="4"><div id="search_selected" style="width:490px; height:60px; overflow-y:scroll; background-color:#CFC"><b>已添加条件</b><br /></div></td>
</tr>
<tr>
<td width="80px"><select name="field" id="field">
<option value="name">姓名</option>
<option value="age">年龄</option>
<option value="tel">电话</option>
<option value="email">EMAIL</option>
<option value="unit">部门</option>
</select></td>
<td width="80px"><select name="operation" id="operation">
<option value="LIKE">通配符</option>
<option value="=">等于</option>
<option value="!=">不等于</option>
<option value="IN (...)">包含于</option>
</select></td>
<td width="100px"><input id="field_value" name="field_value" type="text" size="20"/></td>
<td width="250px"><a οnclick="insert()"><img src="images/check.png" width="28" height="28" alt="完成" align="middle" /></a> <a οnclick="add()"><img src="images/plus.png" width="30" height="30" alt="关系" align="middle" title="添加查询条件"/></a><select id="add" name="add">
<option value="AND">与</option>
<option value="OR">或</option>
<option value="NOT">非</option>
</select></td>
</tr>
</table>
<form action="000.php" method="post">
<table width="440">
<tr><td align="center">
<input name="sql" type="hidden" id="sql" value="select * from user1 where" />
<input name="" type="submit" value="查询" />
</form>
</td></tr></table>
</div>
</body>
</html>