HTML 多个下接框,多组数据筛选。

HTML 多个下接框,多组数据筛选。,第1张

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

select {width: 75pxfont-size: 20pxcolor:#000000font-family: '宋体'}

#main {width: 400pxheight: 20pxmargin:0 autoword-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 = 0i <SG2s.lengthi++)

SG2s[i].options.length = 0

data[this.value].forEach(function(line) {

for(var i = 0i <SG2s.lengthi++) {

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 = 0i <4i++) {

var s = document.createElement('select')

s.name = selectNames[i + 1]

s.onchange = function() {

for(var i = 0i <SG2s.lengthi++)

SG2s[i].selectedIndex = this.selectedIndex

}

SG2s.push(s)

main.append(s)

}

S1.onchange()

}

</script>

</body>

</html>

那你要把提交的再次值赋给下接框,类似以下代码

你最初始的html。

<select name='select_demo'>

<option value='1'>中介</option>

<option value='2'>其他</option>

</select>

假定前台选择了2,其他,我假定你html与php混着写的。

$select_demo = $_POST['select_demo']

$one = ''

$two = ''

switch($select_demo){

case '1':$one = 'selected'break

case '2':$two = 'selected'break

}

===========

<select name='select_demo'>

<option value='1' <?php echo $one ?>>中介</option>

<option value='2' <?php echo $two ?>>其他</option>

</select>

==============

就是将选中的option的值标记为selected.

以上代码是示意性原理代码。望理解后写更好的代码。最好不要抄,因为这样判断太笨了。

正则表达式

<(\S*?) [^>]*>.*?</\1>|<.*? />

匹配

<html>hello</html>|<a>abcd</a>

不匹配

abc|123|<html>ddd

正则表达式

^[^<>`~!/@\#}$%:)(_^{&*=|'+]+$

匹配

This is a test

不匹配

<href = | <br>| That's it

正则表达式

<!--.*?-->

匹配

<!-- <h1>this text has been removed</h1>-->| <!-- yada -->

不匹配

<h1>this text has not been removed</h1>

正则表达式

(\[(\w+)\s*(([\w]*)=('|")?([a-zA-Z0-9|:|\/|=|-|.|\?|&]*)(\5)?)*\])([a-zA-Z0-9|:|\/|=|-|.|\?|&|\s]+)(\[\/\2\])

匹配

[link url="http://www.domain.com/file.extension?getvar=value&secondvar=value"]Link[/li

不匹配

[a]whatever[/b] | [a var1=something var2=somethingelse]whatever[/a] | [a]whatever[a]

正则表达式

href=[\"\'](http:\/\/|\.\/|\/)?\w+(\.\w+)*(\/\w+(\.\w+)?)*(\/|\?\w*=\w*(&\w*=\w*)*)?[\"\']

匹配

href="www.yahoo.com" | href="http://localhost/blah/" | href="eek"

不匹配

href="" | href=eek | href="bad example"

正则表达式

"([^"](?:\\.|[^\\"]*)*)"

匹配

"This is a \"string\"."

不匹配

"This is a \"string\".

正则表达式

(?i:on(blur|c(hange|lick)|dblclick|focus|keypress|(key|mouse)(down|up)|(un)?load|mouse(move|o(ut|ver))|reset|s(elect|ubmit)))

匹配

onclick | onsubmit | onmouseover

不匹配

click | onandon | mickeymouse

正则表达式

(?s)/\*.*\*/

匹配

/* .................... */ | /* imagine lots of lines here */

不匹配

*/ malformed opening tag */ | /* malformed closing tag /*

正则表达式

<(\S*?) [^>]*>.*?</\1>|<.*? />

匹配

<html>hello</html>|<a>abcd</a>

不匹配

abc|123|<html>ddd

正则表达式

\xA9

匹配

©

不匹配

anything

正则表达式

src[^>]*[^/].(?:jpg|bmp|gif)(?:\"|\')

匹配

src="../images/image.jpg" | src="http://domain.com/images/image.jpg" | src='d:\w

不匹配

src="../images/image.tif" | src="cid:value"

正则表达式

/\*[\d\D]*?\*/

匹配

/* my comment */ | /* my multiline comment */ | /* my nested comment */

不匹配

*/ anything here /* | anything between 2 seperate comments | \* *\

正则表达式

<[a-zA-Z]+(\s+[a-zA-Z]+\s*=\s*("([^"]*)"|'([^']*)'))*\s*/>

匹配

<img src="test.gif"/>

不匹配

<img src="test.gif">| <img src="test.gif"a/>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5899435.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-07
下一篇 2023-03-07

发表评论

登录后才能评论

评论列表(0条)

保存