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多個下拉框內容過濾相關的資料