有个时候，我们需要在前台获取到下拉框的值。
比如，在使用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>
分享到：
相关推荐
在本篇文章中，将详细探讨如何使用JavaScript语言在网页中获取用户在下拉列表框（select元素）中选择的文本值。当下拉列表框中的选项发生变化时（即用户选择了新的选项），我们将利用JavaScript来捕获这个变化，并...
### JavaScript获取下拉列表值的方法 要获取用户在下拉列表中选择的值，可以使用JavaScript。基本的思路是利用select元素的onchange事件监听器来触发一个函数，该函数会读取用户选择的项，并对其值进行操作。 ####...
以上示例代码中包含了完整的HTML结构，展示了如何使用JavaScript获取下拉列表的选中值和文本，以及如何获取和修改单选按钮组的选中项。这些技术在实际开发中非常有用，能够帮助开发者更好地处理表单数据。
JavaScript动态级联下拉列表框是一种常见的前端交互设计，它允许用户在选择一个选项后，根据选择的结果动态更新下一个下拉列表框的内容。这种技术在数据筛选、表单填写等场景中广泛应用，能够提高用户体验，减少不必...
在网页开发中，级联下拉菜单是一种常见的交互设计，它允许用户在选择一个选项后，根据该选项的值动态加载下一个下拉菜单的内容。这种效果可以用来展示层级关系的数据，比如国家、省份、城市这样的地理信息。在这个...
获取下拉列表当前选中项的文本值，可以使用JavaScript的`options`属性和`text`属性。下面是一个示例： ```javascript var selectedOption = document.getElementById('mySelect').selectedIndex; var selectedText ...
1. **获取下拉列表框的引用** 使用`document.getElementById()`方法可以通过元素的ID获取到下拉列表框的DOM对象。 2. **获取选项列表项数目** 可以通过访问下拉列表对象的`s.options.length`属性获取到选项的总数...
总结来说，通过JavaScript获取下拉列表的元素个数和值是Web开发中的基本技能之一，它能够帮助开发者根据用户的选择来执行相应的逻辑处理。通过上述示例代码以及详细解释，我们可以了解到如何使用JavaScript来与HTML...
JavaScript实现下拉列表选中某个值的方法主要包括三种方式，分别为通过索引选择、通过name或id选择以及通过value值选择。以下详细阐述每种方法的实现原理和步骤。 首先，了解基本的HTML结构，一个下拉列表通常由一...
获取下拉列表（`<select>`）的值 下拉列表提供了一个可滚动的选项列表供用户选择。获取被选中的值可以通过以下方式实现： ```javascript var selectVal = $("#select_id").val(); ``` 如果下拉列表允许多选，则...
### JavaScript级联下拉列表实例解析 #### 一、引言 级联下拉列表是一种常见的Web表单组件，主要用于需要根据前一个选择的结果来动态更新后续选择项的情况。例如，在用户选择了一个国家之后，相应的省份下拉列表会...
本教程将详细讲解如何使用纯JavaScript技术来创建横向和纵向的下拉列表，这对于Web前端开发者来说是一项基础且实用的技能。 首先，我们来了解下拉列表的基本HTML结构。一个简单的下拉列表由`<select>`元素和一系列`...
在JavaScript编程中，实现无限级联下拉列表是一项常见的需求，尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择，每一级的选择会影响到下一级的显示内容。下面我们将...
标题提到的"几款极好的 JavaScript 下拉列表插件"很可能是对一些优秀的开源插件的介绍。由于没有具体的描述，我们将根据常见的JavaScript下拉列表插件特点来探讨相关的知识点。 1. **FancySelect**： - **功能介绍...
javascript 获取select ->option中id、value、label属性及<option></option>中内容
然而，在使用jQuery获取下拉列表（select）的值时，我们可能会遇到返回字符串“null”的情况，而不是我们期望的空值。这个问题会导致在将这个值用在其他逻辑处理（如数据库查询、条件判断等）时产生错误。 首先，...
根据给定的信息，我们可以提取并总结出关于“JavaScript 二级联动下拉列表”的知识点： ### 一、二级联动下拉列表概述 二级联动下拉列表是一种常见的网页交互设计模式，通常用于显示具有层级关系的数据。当用户在...
通过上述的方法，开发者可以解决select下拉列表在不同浏览器下默认样式不一致的问题，并通过JavaScript为用户提供更加美观和友好的交互体验。同时，使用这种方法也可以增强select的功能，比如添加搜索功能，支持多选...