下拉菜单js代码讲解(js制作下拉菜单)

http://www.itjxue.com  2023-01-30 03:12  来源:未知  点击次数: 

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

(责任编辑:IT教学网)

更多

推荐其它软件文章