html多个下拉框内容过滤_HTML 多个下接框多组数据筛选

A. HTML下拉框中下拉列表中的内容太多了以至于很长很长超过浏览器了

B. HTML 多个下接框，多组数据筛选。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
select {width: 75px; font-size: 20px; color:#000000; font-family: '宋体'}
#main {width: 400px; height: 20px; margin:0 auto; word-spacing: 0px;}
#main select { color:green}
#main select[name=S1] { color:orange}
</style>
</head>
<body>
<div id="main"></div>
<script>
initSelects();

function initSelects() {
var data = {
10:[
[12,110,190,'ESA1210'],
[16,150,230,'ESA1610'],
[20,190,270,'ESA2010']
],
20: [
[24,230,310,'ESA2410'],
[28,270,350,'ESA2810'],
[32,310,390,'ESA3210'],
[36,350,430,'ESA3610']
],
40: [
[40,390,470,'ESA4010'],
[44,430,510,'ESA4410'],
[48,470,550,'ESA4810'],
[52,510,590,'ESA5210']
]
};
var selectNames = ['S1', 'S2', 'S3', 'S4', 'S5'];
var sunits = ['mm', 'n', 'mm', 'mm', ''];

var main = document.getElementById('main');

var S1 = document.createElement('select');
S1.name = selectNames[0];
S1.onchange = function() {
for(var i = 0; i < SG2s.length; i++)
SG2s[i].options.length = 0;
data[this.value].forEach(function(line) {
for(var i = 0; i < SG2s.length; i++) {
var atom = line[i];
SG2s[i].options.add( new Option(atom + sunits[i], atom) );
}
});
};
for(var y in data)
S1.options.add(new Option(y + select[0], y));
main.append(S1);

var SG2s = [];
var names
for(var i = 0; i < 4; i++) {
var s = document.createElement('select');
s.name = selectNames[i + 1];
s.onchange = function() {
for(var i = 0; i < SG2s.length; i++)
SG2s[i].selectEdindex = this.selectedIndex;
};
SG2s.push(s);
main.append(s);
}

S1.onchange();
}
</script>
</body>
</html>

C. html中怎样实现具有下拉效果的多选框

select标记有一个属性multiple，将其设置成multiple="multiple"按住Ctrl键即可实现多选。请看例子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function getValue()
{
var s = "";
for(var i=0;i<form1.ss.options.length;i++)
{
if(form1.ss.options[i].selected)
{
s+=form1.ss.options[i].value;
}
}
alert(s);
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
请选择：
<select id="ss" name="ss" size="5" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<input type="button" name="Submit" value="提交" onclick="getValue()" />
</form>
</body>
</html>
**************************补充**********************
修改select标签的size属性，把它的值改为1即可。

D. html如何做下拉的可多选的复选框列表

下面是我做的一个范例，你可以参考一下

<!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>自定义表单1 - powered by dedecms</title>
<link href="img/nspage.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="../include/dedeajax2.js"></script>
</head>
<body>

<div class="main mceneter">
<div class="toplogo">
<div class="logo">
<a href="/"><img src="/templets/default/images/logo.gif" /></a>
</div>
<div class="title">
<a href='diy.php?action=list&diyid=1'>自定义表单1</a> > 发布信息
</div>
</div>
<div class="cmain">
<div class="ctitle">
<h1>自定义表单1发布</h1>
<span></span>
</div>
<div class="cbox mceneter">
<div class="maplist">
<br />
<form action="/plus/diy.php" enctype="multipart/form-data" method="post">
<input type="hidden" name="action" value="post" />
<input type="hidden" name="diyid" value="1" />
<input type="hidden" name="do" value="2" />
<table style="width:97%;" cellpadding="0" cellspacing="1">
<tr>
<td align="right" valign="top">范例：</td>
<td><select name='fl' style='width:150px'><option value='男'>男</option>
<option value='女'>女</option>
<option value='人妖'>人妖</option>
</select>
</td>
</tr>
<input type="hidden" name="dede_fields" value="fl,select" />
<input type="hidden" name="dede_fieldshash" value="" /></table>
<div align='center' style='height:30px;padding-top:10px;'>
<input type="submit" name="submit" value="提交" class='coolbg' />

<input type="reset" name="reset" value="重置" class='coolbg' />
</div>
</form>
</div>
</div>
</div>
</div>

<div class="right mceneter">
Powered by <a href="http://www.dedecms.com" target="_blank">DedeCMS</a> &; 2004-2009 <a href="http://www.desdev.cn" target="_blank">DesDev</a> Inc.
</div>

</body>
</html>

E. html如何实现下拉框中多选项，我有个问题想请教各位。

加入了multiple可以多个选择了，包括Shift进行快速全选及Ctrl进行点选
<form name="form1">
<select name="selectwhat" size=3 multiple>
<option value="a">aaa</option>
<option value="b">bbb</option>
<option value="c">ccc</option>
</select>
</form>

这也行吧多选
<form action="" method="post">
<input name="name[]" type="checkbox" value="1" />1<br />
<input name="name[]" type="checkbox" value="2" />2<br />
<input name="name[]" type="checkbox" value="3" />3<br />
<input name="name[]" type="checkbox" value="4" />4<br />
<input name="name[]" type="checkbox" value="5" />5
</form>

F. 网页上面如何做带搜索筛选功能的选择框，下拉列表。

如果仅考虑客户端，那么用的就是数据字典，将数据缓存起来。

考虑到数据来自于服务端的比较多，且结合AJAX技术，下拉框中的内容每发生一次改变，就会查询一次服务器，然后服务端对客户端的请求进行处理，找到响应的数据，并反馈给客户端，然后客户端进行显示，这种下拉框式的列表，如今一般都是自己写的样式了。

为避免页面重复刷新，推荐使用AJAX进行异步交互。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>123</title>
<style type="text/css">
#list
{
height: 100px;
width: 155px;
border:1px solid #FFCC00;
}
</style>
</head>
<body>
<input id="search"/>
<div id="list" style="display: none;">
<ul id="group">
</ul>
</div>
</body>
<script LANGUAGE="JAVASCRIPT">
var array = [["a", "ab", "abc"], ["d", "de", "def"]];
var search = document.getElementById("search");
var list = document.getElementById("list");
var group = document.getElementById("group");

search.addEventListener("input", input, false);
//search.addEventListener("keyup", keyup, false);

function input(){
//删除所有子节点
var children = group.childNodes;
while(group.lastChild)
{
group.removeChild(group.lastChild);
list.style.display = "none";
}

for(var i = 0; i < array.length; i++)
{
for(var j = 0; j < array[i].length; j++)
{
if(search.value.toString() == array[i][j])
{
list.style.display = "block";
show(array[i]);
}
}
}
}

//显示内容
function show(arr){
var temp = arr;

for(var k = 0; k < temp.length; k++)
{
if(temp[k].indexOf(search.value) > -1)
{
var ele = document.createElement("li");
group.appendChild(ele);
ele.innerHTML = temp[k];
}
}
}
</script>
</html>

如果要兼容IE，input事件名称要做修改。

G. html 中用什么函数可以清除下拉列表的数据

jquery插件里面有个empty()方法。
用法像这样： $("#zhlx").empty()；//清空下拉框

导航:首页 > 净水问答 > html多个下拉框内容过滤

html多个下拉框内容过滤

与html多个下拉框内容过滤相关的资料