下拉菜单js代码讲解(js制作下拉菜单)
html下拉框怎么用js添加新值
html下拉框怎么用js添加新值
javascript添加一个下拉列表项的方法:创建一个新的option节点,然后添加到目标select对象中去,关键代码如下:
1、var objSelect = document.getElementById(select_id)。
2、var new_opt = new Option(objItemText, objItemValue)。
3、objSelect.options.add(new_opt)。
实例演示如下:
1、HTML结构,包括一个select项,含有三个options。另外,设置input和button,通过自由父子,实现给select增加自定义option。
此时的显示效果如下,其中option中有三项。
2、JS的函数设计如下:
现有的options如下:
3、在页面上输入新的数据,点击添加。
此时的select效果显示如下,自由添加功能实现。
这是段js下拉菜单隐藏和显示的代码,有些地方不太明白,请给解释一下。
这个也不复杂,不过感觉你的这个代码并不好的样子。
//根据id获取对象
function
$(id)
{
return
document.getElementById(id);
}
function
showMenu(baseID,divID)
{
baseID=$(baseID);
divID=$(divID);
if(showMenu.timer)clearTimeout(showMenu.timer);//清楚定时器
hideCur();//隐藏上个菜单
divID.style.display='block';//显示当前菜单
showMenu.cur=divID;//保存当前菜单对象
if(!divID.isCreate)
{//该菜单没创建标志则设置为已创建
divID.isCreate=true;
//divID.timer
=
0;
divID.onmouseover=function
()
{//鼠标放在菜单上时显示
if(showMenu.timer)clearTimeout(showMenu.timer);
hideCur();
divID.style.display='block';
};
function
hide()
{//鼠标离开菜单1秒后隐藏菜单
showMenu.timer=setTimeout(function
()
{
divID.style.display='none';
},1000);
}
divID.onmouseout=hide;
baseID.onmouseout=hide;
}
function
hideCur()
{//隐藏上个菜单
showMenu.cur(showMenu.cur.style.display='none');
}
}
下拉菜单点击实现连接跳转功能的js代码
js代码
代码如下: ! function MM_jumpMenu(targ selObj restore){ eval(targ+" location= "+selObj options[selObj selectedIndex] value+" "); if (restore) selObj selectedIndex= ; } ?代码如下: p class="yq"校友会链接 /p p label select name=select onchange="MM_jumpMenu( parent this )" option 请选择 /option option value=" 复旦大学校友网 /option option value=" 北京大学校友网 /option option value=" 清华大学校友网 /option /select /label/p ? lishixinzhi/Article/program/Java/JSP/201311/20368