本文目录一览：
- 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
