javascript下拉,javascript下拉列表怎么做

关于JavaScript的生成下拉菜单代码

既然是下拉式菜单嘛

肯定不会只有JS

语句嘛

起码要有一些HTML的标签哦

记住一点

JS

菜单是

动态的管理HTML和CSS的

HTML

静态显示

CSS

管理HTML的显示效果

javascript

在浏览器上动态的管理HTML和CSS以及一些操作

你也没有把全部代码写出来

估计也没什么好回答的

除非人家给你一个现成的代码

我给你说说下拉式菜单的实现原理吧

任何HTML的标签都有个style属性..这里可以设置CSS属性

就是控制这个标签的样式属性..里头有个属性叫display

当这个display的值是none的时候..这个标签在浏览器上就不会显示,但是浏览器会读取它的数据

只是不展示给用户而已

下拉式菜单,说白了就是你点一下菜单,弹出一个子菜单而已..有点编程的基础就知道该怎么做啦..

事先设置好你要显示的子菜单,并在它的HTML属性里加一个

style="display:none;"意思就是告诉浏览器这个标签的所有内容都不显示

然后javascript语句

获得那个标签之后呢.比如e就是JS代码中对这个标签的对象引用啦

设置e.style.display='';//空就表示是默认了,而默认是要显示的

那么这个标签就会显示了呀..这个JS

代码你可以作为一个事件处理程序中的一部分..放在onclick里

就形成了点一下按钮才弹出那个菜单了噻....

要是你点都不懂编程

肯定不明白我说的啥子

要做这个下拉菜单..起码要懂HTML

javascript

和CSS的一些最基本基础

相关问答

Q1: javascript获取下拉列表框当中的文本值示例代码

近日碰到一个问题，就是需要将用户点击下拉列表当中某个选项后，将其所选的内容保存起来，例如下面的HTML代码：

复制代码

代码如下:

select

onchange="isSelected(this.value);"

id="city"

option

value="1"北京/option

option

value="2"

上海/option

option

value="2"

广州/option

/select

也就是说当用户选择“上海”这一列时，需要将“上海”这个名称保存起来。其实方法很简单。看下面javascript代码：

复制代码

代码如下:

function

isSelected(value)

{

var

cityName;

var

city

=

document.getElementById("city");

//获取选中的城市名称

for(i=0;icity.length;i++){

if(city[i].selected==true){

cityName

=

city[i].innerText;

//关键点

alert("cityName:"

+

cityName);

}

}

也可以这么做：

复制代码

代码如下:

function

isSelected(value)

{

var

city

=

document.getElementById("city");

alert(city.options[city.selectedIndex].innerText);

}

大致解释一下，首先在HTML页面上有一个下拉框，并为此下拉框定了一个“city”的id，并为其绑定了一个onchange事件，通过此事件调用javascript函数。

在javascript函数当中，通过domcument对象获取当前下拉框的节点元素，由于节点的值并非只有一个，所以我们可以通过循环节点来得到每个选项的值。在循环的时候通过判断当前选项是否选中，如果选中则使用city[i].innerText

方式获取当前所选中的文本值。当然如果需要获取选项值，只需如此即可：city[i].value.

至此，通过以上方法在IE下已能达到所要的结果。但是，在FIREFOX下测试时，发现此法不起作用，最后通过查阅资料发现另外一个方法。将city[i].innerText

改为

city[i].text即可。这种方法对IE及FIXEFOX都适用！

Q2: 用javascript怎么取下拉列表的值

对于单选下拉列表，value属性可以直接获取其选中项的value值。

下面实例演示——单击按钮获取下拉列表选中项的value值：

1、HTML结构

select id="test"

option value="1"option-1/option

option value="2"option-2/option

option value="3"option-3/option

option value="4"option-4/option

/select br

input type='button' value='获取选中项' onClick="fun()"/

2、javascript代码

function fun(){

obj = document.getElementById("test");

alert(obj.value);

}

3、效果演示

Q3: 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效果显示如下，自由添加功能实现。

Q4: 在JavaScript中如何提取下拉框中的值？

JavaScript中可以用for循环提取下拉框中的值，关键代码如下：

obj = document.getElementById("select_id"); // 获取select对象

str = "";

for(i=0;iobj.options.length;i++){  // obj.options.length表示下拉选项数目

    str += obj.options[i].text;   // obj.options[i].text表示第i+1个下拉项目的文本

}

下面进行实例演示：

1、Html结构

select id="test"

option value="1"刘备/option

option value="2"关羽/option

option value="3"张飞/option

/selectbr

input type='button' value='获取select所有选项' onclick="fun()"/

2、jquery代码

function fun(){

obj = document.getElementById("test");

str = "";

for(i=0;iobj.options.length;i++){

str += obj.options[i].text;

}

alert(str);

}

3、观察效果

Q5: 用JavaScript写一个下拉菜单

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titlenav/title

script language="javascript"

// JavaScript Document

startList = function() {

if (document.alldocument.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; inavRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

}

node.onmouseout=function() {

this.className=this.className.replace(" over", "");

}

}

}

}

}

window.onload=startList;

/script

style type="text/css"

!--

body {

font: normal 11px verdana;

}

ul {

margin: 0;

padding: 0;

list-style: none;

width: 150px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;

}

ul li {

position: relative;

}

li ul {

position: absolute;

left: 149px; /* Set 1px less than menu width */

top: 0;

display: none;

}

/* Styles for Menu Items */

ul li a {

display: block;

text-decoration: none;

color: #777;

background: #fff; /* IE6 Bug */

padding: 5px;

border: 1px solid #ccc; /* IE6 Bug */

border-bottom: 0;

}

/* Holly Hack. IE Requirement \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

--

/style

/head

body

ul id="nav"

lia href="#"Home/a/li

lia href="#"About/a

ul

lia href="#"History/a/li

lia href="#"Team/a/li

lia href="#"Offices/a/li

/ul

/li

lia href="#"Services/a

ul

lia href="#"Web Design/a/li

lia href="#"Internet Marketing/a/li

lia href="#"Hosting/a/li

lia href="#"Domain Names/a/li

lia href="#"Broadband/a/li

/ul

/li

lia href="#"Contact Us/a

ul

lia href="#"United Kingdom/a/li

lia href="#"France/a/li

lia href="#"USA/a/li

lia href="#"Australia/a/li

/ul

/li

/ul

/body

/html