点击下拉内容js代码,点击下拉内容js代码没反应

本文目录一览：

• 1、如何用js取下拉框中的内容
• 2、用js怎样获得下拉框的值？
• 3、JS组件Bootstrap实现下拉菜单效果代码
• 4、js怎么添加一个下拉列表的值
• 5、谁内给我讲一将如下 下拉菜单的js代码
• 6、下拉菜单点击实现连接跳转功能的js代码

如何用js取下拉框中的内容

jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关；

获取一组radio被选中项的值

var item = $(‘input[@name=items][@checked]’).val();

获取select被选中项的文本

var item = $(“select[@name=items] option[@selected]”).text();

select下拉框的第二个元素为当前选中值

$(‘#select_id’)[0].selectedIndex = 1;

radio单选组的第二个元素为当前选中值

$(‘input[@name=items]’).get(1).checked = true;

获取值：

文本框，文本区域：$(“#txt”).attr(“value”)；

多选框checkbox：$(“#checkbox_id”).attr(“value”)；

单选组radio： $(“input[@type=radio][@checked]”).val();

下拉框select： $(‘#sel’).val();

控制表单元素：

文本框，文本区域：$(“#txt”).attr(“value”,”);//清空内容

$(“#txt”).attr(“value”,’11’);//填充内容

多选框checkbox： $(“#chk1”).attr(“checked”,”);//不打勾

$(“#chk2”).attr(“checked”,true);//打勾

if($(“#chk1”).attr(‘checked’)==undefined) //判断是否已经打勾

单选组radio： $(“input[@type=radio]”).attr(“checked”,’2′);//设置value=2的项目为当前选中项

下拉框select： $(“#sel”).attr(“value”,’-sel3′);//设置value=-sel3的项目为当前选中项

$(“option value=’1’1111/optionoption value=’2’2222/option”).appendTo(“#sel”)//添加下拉框的option

$(“#sel”).empty()；//清空下拉框

用js怎样获得下拉框的值？

1、首先我们打开软件进入代码编辑按照图示代码先创建一个下拉框。

2、要运行后网页界面如此显示下拉框。

3、接下来我们按照图示代码用js来获取被选中的值。

4、首先我们通过selectedIndex来获得被选中的下标，再通过下标来获得值。

5、当然，如果你是用jquery的话可以按照图示代码进行设置依然可以获得下拉框的值。

JS组件Bootstrap实现下拉菜单效果代码

Bootstrap

下拉菜单

这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

如果您想要单独引用该插件的功能，那么您需要引用

dropdown.js。或者，正如

Bootstrap

插件概览

一章中所提到，您可以引用

bootstrap.js

或压缩版的

bootstrap.min.js。

一、用法

您可以切换下拉菜单（Dropdown）插件的隐藏内容：

1、通过

data

属性：向链接或按钮添加

data-toggle=”dropdown”

来切换下拉菜单，如下所示：

div

class=”dropdown”

a

data-toggle=”dropdown”

href=”#”下拉菜单（Dropdown）触发器/a

ul

class=”dropdown-menu”

role=”menu”

aria-labelledby=”dLabel”

…

/ul

/div

如果您需要保持链接完整（在浏览器不启用

JavaScript

时有用），请使用

data-target

属性代替

href=”#”：

div

class=”dropdown”

a

id=”dLabel”

role=”button”

data-toggle=”dropdown”

data-target=”#”

href=”/page.html”

下拉菜单（Dropdown）

span

class=”caret”/span

/a

ul

class=”dropdown-menu”

role=”menu”

aria-labelledby=”dLabel”

…

/ul

/div

2、通过

JavaScript：通过

JavaScript

调用下拉菜单切换，请使用下面的方法：

$(‘.dropdown-toggle’).dropdown()

二、下拉菜单简单实例

常规使用中，和组件方法一样，代码如下：

//声明式用法

div

class=”dropdown”

button

class=”btn

btn-primary”

data-toggle=”dropdown”

下拉菜单

span

class=”caret”/span

/button

ul

class=”dropdown-menu”

lia

href=”#”首页/a/li

lia

href=”#”产品/a/li

lia

href=”#”资讯/a/li

lia

href=”#”关于/a/li

/ul

/div

声明式用法的关键核心：

1.外围容器使用

class=”dropdown”包裹；

2.内部点击按钮事件绑定

data-toggle=”dropdown”；

3.菜单元素使用

class=”dropdown-menu”。

//如果按钮在容器外部，可以通过

data-target

进行绑定。

button

class=”btn

btn-primary”

id=”btn”

data-toggle=”dropdown”

data-target=”#dropdown”

在

JavaScript

调用中，没有属性，方法并不好用，下面介绍四个基本事件。

//下拉菜单方法，但仍然需要

data-*

$(‘#btn’).dropdown();

$(‘#btn’).dropdown(‘toggle’);

下拉菜单支持

4

种事件，分别对应弹出前、弹出后、关闭前和关闭后。

//事件，其他雷同

$(‘#dropdown’).on(‘show.bs.dropdown’,

function()

{

alert(‘在调用

show

方法时立即触发！’);

});

三、在标签页内的下拉菜单的用法

!DOCTYPE

html

html

head

titleBootstrap

实例

–

带有下拉菜单的标签页/title

link

href=”/bootstrap/css/bootstrap.min.css”

rel=”stylesheet”

script

src=”/scripts/jquery.min.js”/script

script

src=”/bootstrap/js/bootstrap.min.js”/script

/head

body

p带有下拉菜单的标签页/p

ul

class=”nav

nav-tabs”

li

class=”active”a

href=”#”Home/a/li

lia

href=”#”SVN/a/li

lia

href=”#”iOS/a/li

lia

href=”#”VB.Net/a/li

li

class=”dropdown”

a

class=”dropdown-toggle”

data-toggle=”dropdown”

href=”#”

Java

span

class=”caret”/span

/a

ul

class=”dropdown-menu”

lia

href=”#”Swing/a/li

lia

href=”#”jMeter/a/li

lia

href=”#”EJB/a/li

li

class=”divider”/li

lia

href=”#”分离的链接/a/li

/ul

/li

lia

href=”#”PHP/a/li

/ul

/body

/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代码

第一， visibility：heddin；是让子菜单初始化时隐藏。这样下面的showmenu函数显示时才有从无到有的效果。

第二 showmenu 是函数名字，可以自己命名，规则和变量名规则一样

第三 触发这个函数时 把子菜单的显示属性设置为显示 如果是hidden 则隐藏。menu是子菜单对象 style是子菜单的样式对象，也可以说是样式属性 visibility是设置网页元素显示与否的样式属性 这里可以改成menu.style.display=””;

第四 document.onclick = hidmenu；是给网页单击事件指定处理函数

这是例子，如果是放到实际网页里就不能这么写了

最好是给每个a标签指定 onclick事件

像下边一样 a href=”javascript:showmenu()”下拉菜单/a

下拉菜单点击实现连接跳转功能的js代码

1.js代码

复制代码

代码如下:

!–

function

MM_jumpMenu(targ,selObj,restore){

eval(targ+”.location='”+selObj.options[selObj.selectedIndex].value+”‘”);

if

(restore)

selObj.selectedIndex=0;

}

—

2.使用

复制代码

代码如下:

p

class=”yq”校友会链接：/p

p

label

select

name=”select2″

onchange=”MM_jumpMenu(‘parent’,this,0)”

option

请选择

/option

option

value=””

复旦大学校友网

/option

option

value=””

北京大学校友网

/option

option

value=””

清华大学校友网

/option

/select

/label/p