`
jacky68147527
  • 浏览: 206998 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

javascript获取下拉列表的值

阅读更多
有个时候,我们需要在前台获取到下拉框的值。

比如,在使用DWR的时候,如果你想传递下拉框的参数到后台的话,此时就需要先获取到

下拉框的值了。

其实想要获取到下拉框的值是很简单的。

最关键的一段代码就是:
onchange="show(this.options[this.options.selectedIndex].value);"

show是一个自定义的函数名。

this.options[this.options.selectedIndex].value才是主角!

完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript获取下拉列表的值</title>

<style type="text/css">
body{
font-family:"Courier New", Courier, monospace;
font-size:24px;
color:#0099FF
}

select{
border:solid 1px #0066FF;
font-family:"Courier New", Courier, monospace 14px;
}
</style>

<script type="text/javascript">
function show(value){
	document.getElementById("showChoise").innerHTML="Your Selected : "+value;
}
</script>

</head>

<body style="text-align:center">
<p>JavaScript获取下拉列表的值</p>
<p>
  <select name="select" onchange="show(this.options[this.options.selectedIndex].value);">
    <option value="javascript">javascript</option>
    <option value="ajax">ajax</option>
    <option value="css">css</option>
    <option value="dwr">dwr</option>
    <option value="html">html</option>
    <option value="uml">uml</option>
    <option value="xml">xml</option>
  </select>
</p>
<p>
<div id="showChoise"></div>
</p>
</body>
</html>
分享到:
评论
1 楼 王俊生 2009-03-12  
好,不错!

相关推荐

    javascript 获取select下拉列表值的代码

    比如,在使用DWR的时候,如果你想传递下拉框的参数到后台的话,此时就需要先获取到下拉框的值了。 其实想要获取到下拉框的值是很简单的。 最关键的一段代码就是: 代码如下: onchange=”show(this.options[this....

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

    需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,下面与大家分享下如何使用js获取下拉列表框文本值,由此需求的朋友可以参考下

    js获取下拉列表中选中的值和文本

    这是javascript获取下拉菜单选中的值和文本的技术文档

    javascript 获取select ->option中id、value、label属性及中内容

    javascript 获取select -&gt;option中id、value、label属性及&lt;option&gt;&lt;/option&gt;中内容

    JavaScript完全自学宝典 源代码

    6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 6.9.html 复选框的JavaScript特效。 6.10.html JavaScript取单选框的值。 6.11.html JavaScript控制单选框...

    javascript级联下拉列表实例代码(自写)

    1,Select对象。 属性 a,selectedIndex:用户选择的选项的下标,下标从0开始 b,length: 获取或者设置选项的个数 c,options: 返回一个数组,数组元素是Option对象 2,Options... 我写的一个级联下拉列表: 代码如下: 代

    JS获取下拉列表所选中的TEXT和Value的实现代码

    如下所示: 代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...&lt;head&gt;&lt;... charset=utf-8″ /&gt;&lt;...script type=”text/javascript”

    程序天下:JavaScript实例自学手册

    6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...

    javascript初级代码学习.zip

    007-获取下拉列表选中项的value 008-显示网页时钟 009-内置支持类Array 004-关于JS中的变量 005-JS函数初步 007-JS的局部变量和全局变量 007-JS的局部变量和全局变量 008-JS中的数据类型 014-null NaN undefined这三...

    《程序天下:JavaScript实例自学手册》光盘源码

    6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...

    JavaScript详解(第2版)

     14.11.5 下拉菜单和提示框   14.12 应知应会   练习   第15章 W3C DOM与JavaScript   15.1 W3C DOM   15.2 理解DOM节点   15.3 节点   15.3.1 父节点和子节点   15.3.2 兄弟节点   ...

    JavaScript网页特效范例宝典源码

    实例061 获取下拉列表/菜单的值 104 实例062 遍历多选择下拉列表 105 实例063 在下拉列表中进行多选移除 106 实例064 将数组中的数据添加到下拉菜单中 107 实例065 应用下拉菜单选择所要联机的网站 108 实例066 多级...

    JavaScript经典实例

     8.2创建一个新的、下拉式的浏览器窗口  8.3找到关于浏览器的访问页面  8.4警告Web页面访问者将要离开页面  8.5根据颜色支持更改样式表  8.6根据页面大小修改图像尺寸  8.7在CMS模板页面中创建面包屑路径  ...

    jQuery ajax+PHP实现的级联下拉列表框功能示例

    $.get(returnpc.php?flag=p, null, function(data){ //向服务器发送GET请求,获取省份的值,并将结果追加到省份下拉列表中 $(#p).append(data); }); $(#c).css(display,none); //初始状态使城市下拉列表不可见 ...

    JavaScript王者归来part.1 总数2

     12.8.2 如何使用XML DOM--一个利用XML实现多级关联下拉选择框的例子   12.9 总结   第13章 事件处理  13.1 什么是事件   13.1.1 消息与事件响应   13.1.2 浏览器的事件驱动机制   13.2 基本事件处理  ...

    JavaScript笔记

    js的方法定义:function方法名([参数列表]){ 方法体 [return 返回值] } 注意:js中的方法可以直接写在代码中,不需要“类”包裹 使用方法:方法名()--&gt;方法调用--&gt;立即执行 2.js文件:网页外专门保存js...

Global site tag (gtag.js) - Google Analytics