html select 属性

html select 属性,第1张

第一个问题:是用JS实现,用JS动态添加选项,示例: <script language="JavaScript">function SecondSL(num){//0为请选择提示子项//第2个为本身标识//第3个是所属类别,所以通过此值对比上级项值,即可筛选出同级项来city = new Array() city[1]= new Array("唐山市","1","1") city[2]= new Array("石家庄","2","1") city[3]= new Array("营口市","3","2") city[4]= new Array("沈阳市","4","2") //把数组的值用数据库读出document.form1.s1.length = 0document.form1.s1.options[0]= new Option("请选择市","0") j=1 for(i=1i<=4i++){ //比较每一个数据,//把同一类别的项筛选出来if(city[i][2]==num){//document.form1.s1.length 当前选项的个数//不能使用i作为标识,因为有的数据项不是属于num级的数据document.form1.s1.options[document.form1.s1.length]= new Option(city[i][0],city[i][1])//创建新子项}j++ }}function ThirdSL(num){city = new Array() city[1]= new Array("唐山路北区","1","1") city[2]= new Array("唐山古冶区","2","1") city[3]= new Array("石家庄正定","3","2") city[4]= new Array("石家庄新集","4","2") city[5]= new Array("营口站前区","5","3") city[6]= new Array("营口西市区","6","3") city[7]= new Array("沈阳市区","7","4") city[8]= new Array("沈阳三好街","8","4") //把数组的值用数据库读出document.form1.s2.length = 0document.form1.s2.options[0]= new Option("请选择县","0") j=1 for(i=1i<=8i++){ if(city[i][2]==num){document.form1.s2.options[document.form1.s2.length]= new Option(city[i][0],city[i][1]) }j++}}</script><body> <form name="form1" method="post" action=""> <!--form1.ss的值用数据库读出--> <select name="ss" onchange="SecondSL(document.form1.ss.options[document.form1.ss.selectedIndex].value)"> <option value="0">请选择省</option> <option value="1">河北省</option> <option value="2">辽宁省</option> </select> <select name="s1" onchange="ThirdSL(this.value)"> </select> <select name="s2" id="s2"> </select> </form></body>第二个问题:不是,不刷新出现。第三个问题:onload 是当文档载入时(也就是读取到<body>标签时)即触发的JS代码段,onclick 是单击才触发的。

你可以把select的value值定义为图片的名称

例如

<select onchange="changeImg(this.value)">

<option value="图片名称1">图片1</option>

<option value="图片名称2">图片2</option>

<option value="图片名称3">图片3</option>

。。。

</select>

<img src="" id="showimg" name="showimg" />

js可以这么写

function changeImg(val) {

document.getElementById('showimg').src="你的图片路径"+val

}


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存