DHTML(Dynamic HTML)--5.select下拉框

来源：互联网发布：女生漂亮知乎编辑：程序博客网时间：2024/06/05 16:36

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"></style><script type="text/javascript">function selectItem(node){/*var values1=[["--请选择--"],["java","c","c++"],["苹果","火龙果","西瓜","葡萄"]];*/var values1={"book":["java","c","c++"],"fruit":["苹果","火龙果","西瓜","葡萄"]};//先清除上一次下拉框中的选项var values=document.getElementById("values");while(values.options.length>1){values.removeChild(values.options[1]);//移除下拉框组件中的第二项,第一项为"--请选择--"}var arrValues=values1[ node.options[node.selectedIndex].value ];//在把新的选项加入到下拉框中for(var i=0;i<arrValues.length;i++){var option=document.createElement("option");option.innerHTML=arrValues[i];values.appendChild(option);}}</script></head><body><!--  <select onclick="changeColor();">--><select id="select1" onchange="selectItem(this);"><option value="none">--选择--</option><option value="book">书本</option><option value="fruit">水果</option></select><select id="values"><option value="black" style="background-color: black;">--请选择--</option></select></body></html>

阅读全文

0 0