一、获取下拉列表选中项的值和文本(select)
<html>
<head><title>获取下拉列表选中项的值和文本(select)</title></head>
<body>
<script>
//获取下拉列表选中项的文本
function getSelectedText(name){
var obj=document.getElementById(name);
for(i=0;i<obj.length;i++){
if(obj[i].selected==true){
return obj[i].innerText; //关键是通过option对象的innerText属性获取到选项文本
}
}
}
//获取下拉列表选中项的值
function getSelectedValue(name){
var obj=document.getElementById(name);
return obj.value; //如此简单，直接用其对象的value属性便可获取到
}
</script>
<select id="myselect">
<option value="fist">1</option>
<option value="second">2</option>
<option value="third">3</option>
</select>
<input type="button" value="所选文本" onclick="alert(getSelectedText('myselect'));" />
<input type="button" value="所选值" onclick="alert( getSelectedValue('myselect'));" />
</body>
</html>
二、获取单选按钮(radio)组的值和修改选中项
看到很多帖子里说js获取单选按钮(radio)组的值可以直接用document.getElementById("oper").value,虽然跟单选按钮组一样的下拉列表(也是列表项的数组)也是一个数组，用这种方式可以获到下拉列表的值,但是单选按钮组却获不到所选的值。仔细研究了下，总结如下：
与下拉列表不同，单选按钮须用this.form.oper或者document.getElementsByName('oper')方式获取该数组对象，document.getElementById('oper')不能获取该数组对象(select可以)。而且要获取值须通过一循环判断获取，不能直接用.value(select可以)。而要改变单选按钮组的选中项，也须用循环判断改变各个单选按钮的value。
测试代码radio.html 如下:
<html>
<head></head>
<script language="javascript">
//求单选按纽的值，适用单选项及多选项。未选返回false；有选择项，返回选项值。
function getRadio(oRadio){
var oRadioLength= oRadio.length;
var oRadioValue = false;
//alert("oRadioLength:["+oRadioLength+"]");
if (oRadioLength== undefined){
if (oRadio.checked){
oRadioValue = oRadio.value;
}
}else{
for (i=0;i<oRadioLength;i++){
//alert("oRadio["+i+"]:"+oRadio[i].checked+"/"+oRadio[i].value);
if (oRadio[i].checked){
oRadioValue = oRadio[i].value;
break;
}
}
}
return oRadioValue;
}
//方法改进：
//求单选按纽的值，传radio名字作为参数。未选返回false；有选择项，返回选项值。
function getRadioValue(name){
var radioes = document.getElementsByName(name);
for(var i=0;i<radioes.length;i++)
{
if(radioes[i].checked){
return radioes[i].value;
}
}
return false;
}
//通过值修改所选中的单选按钮
function changeRadio(oRadio,oRadioValue){ //传入一个对象
for(var i=0;i<oRadio.length;i++) //循环
{
if(oRadio[i].value==oRadioValue) //比较值
{
oRadio[i].checked=true; //修改选中状态
break; //停止循环
}
}
}
//改进：
//通过值修改所选中的单选按钮
function setRadio(name,sRadioValue){ //传入radio的name和选中项的值
var oRadio = document.getElementsByName(name);
for(var i=0;i<oRadio.length;i++) //循环
{
if(oRadio[i].value==sRadioValue) //比较值
{
oRadio[i].checked=true; //修改选中状态
break; //停止循环
}
}
}
</script>
<body>
<form name="frm">
<input type="radio" name="oper" value="agree" >同意</td>
<input type="radio" name="oper" value="downchange" checked>下发修改</td>
<input type="radio" name="oper" value="refuse">拒保</td>
<input type="radio" name="oper" value="report" >上报 </td>
<br>
alert('result:'+getRadio(this.form.oper))
<input type="button" name="test1" value="按钮1" onclick="alert('result:'+getRadio(this.form.oper));">
<br>
alert('result:'+getRadio(document.getElementById('oper')))
<input type="button" name="test2" value="按钮2" onclick="alert('result:'+getRadio(document.getElementById('oper')));">
<br>
alert(this.form.oper.value)
<input type="button" name="test3" value="按钮3" onclick="alert(this.form.oper.value);">
<br>
changeRadio(this.form.oper,"上报")
<input type="button" name="test4" value="按钮4" onclick="changeRadio(this.form.oper,'report');">
<br><br><br><br>
<select id="slt">
<option value="agree" >同意</option>
<option value="downchange" selected>下发修改</option>
<option value="refuse">拒保</option>
<option value="report">上报</option>
</select>
<br>
alert(this.form.slt.value)
<input type="button" name="test5" value="按钮5" onclick="alert(this.form.slt.value);">
<br>
document.getElementById('slt')[2].innerText)
<input type="button" name="test6" value="按钮6" onclick="alert(document.getElementById('slt')[2].innerText);">
</form>
</body>
</html>
转载地址：http://hi.baidu.com/nirvanan/blog/item/5b841539aa872af5b311c7c2.html
分享到：
相关推荐
以上示例代码中包含了完整的HTML结构，展示了如何使用JavaScript获取下拉列表的选中值和文本，以及如何获取和修改单选按钮组的选中项。这些技术在实际开发中非常有用，能够帮助开发者更好地处理表单数据。
根据提供的文件信息，我们可以总结出一系列关于如何使用jQuery来获取不同类型的表单元素（如文本框、单选按钮、复选框以及下拉列表）的值的方法。下面将详细介绍这些方法及其应用场景。 ### 一、获取文本框(input ...
- 通过 `[type=radio]` 和 `[checked]` 属性选择器来获取当前被选中的单选按钮的值。 ##### 2. 设置选中状态 - **`$("input[@type=radio][@value=2]").attr("checked",'checked');`** - 使用 `attr()` 方法设置...
3. 在事件处理函数中，获取选中单选按钮的值，并根据该值判断是否要启用或禁用文本域和下拉菜单。 4. 使用`document.getElementById`或`document.querySelector`等方法获取文本域和下拉菜单元素，然后设置它们的`...
本文将详细介绍如何使用jQuery来操作下拉列表，包括获取和设置选择的文本、值，以及添加和删除选项。 **一、获取Select选择的Text和Value** 1. 通过`$("#select_id").change(function(){...})`，我们可以为下拉...
本文将详细讲解如何使用jQuery来获取不同类型的表单控件（如文本框、文本域、单选按钮、复选框、下拉列表）的值。 #### 一、获取表单控件的值 ##### 1. 获取文本框（`<input type="text">`）的值 文本框是最常见...
### jQuery 获取 Select、Radio、Checkbox 的 Text 和 Value 值详解 #### 一、Select 下拉框的操作 在网页开发中，`<select>` 标签用于创建下拉列表，通常用于用户输入时的选择操作。jQuery 提供了简单且强大的...
对于`radio`单选按钮，获取选中的值： ```javascript var radioButtonValue = $("input[@type=radio][@checked]").val(); ``` 设置某个`radio`选中： ```javascript $('input[@name=items]').get(1).checked = true;...
#### 获取`select`下拉列表的值和文本 获取`select`下拉列表中被选中项的文本和值也是非常常见的需求。下面是一些示例代码： ```javascript // 获取select被选中项的文本 var item = $("select[@name=items] ...
2. Java Swing / AWT：在Java中，我们可以使用`JRadioButton`类创建单选按钮，并使用`ButtonGroup`管理同一组内的单选按钮，确保一次只能选中一个。 二、下拉列表（Drop-down List） 下拉列表提供了一种紧凑的方式...
此时，可以通过 JavaScript 获取所有选中项的值。 在实际应用中，开发者经常结合CSS来美化这些元素，使其符合网站的设计风格。JavaScript 或者 jQuery 可以进一步增强交互性，例如动态加载选项、验证用户输入、或者...
二、获取单选按钮（radio）组的值和修改选中项 单选按钮（radio）组允许用户在多个选项中选择一个。与下拉列表不同，获取单选按钮的值需要额外的处理，因为它们是作为一组（通过相同的名字属性关联）存在的，而不是...
本文主要探讨了如何获取三种常见的表单元素——复选框（checkbox）、单选按钮（radio）以及下拉列表（select）的值。 1. **获取复选框（Checkbox）的值**： 复选框在HTML中的`<input type="checkbox">`标签中定义...
文档介绍了如何使用JavaScript将下拉列表（select元素）或单选按钮（radio元素）中选中的值累加到文本框（textarea元素）中的方法。以下是实现这一功能所需掌握的关键知识点。 ### 1. HTML表单元素 - **select元素*...
在实际应用中，通常建议为单选按钮和复选按钮的组添加相同的name属性，并为下拉列表的每个选项明确设置value属性，这样能更清晰地控制数据的流向和表单的行为。熟练运用Vue.js处理表单，不仅可以提升开发效率，还...
本文将详细解析如何使用jQuery获取表单元素的各种值，包括文本框（TEXT）、文本区域（AREA TEXT）、复选框（CHECKBOX）、单选按钮（RADIO）、下拉列表（SELECT）以及表格（TABLE）中的数据。 ### 文本框（TEXT） ...
例如，`$("#selectTest").change(function() {...})`会在用户更改`selectTest`的选项时触发内部的代码，如显示选中项的文本或修改select的值。 总的来说，jQuery使得在JavaScript中处理select和其他HTML元素变得...
标题中提到的知识点是“js使用DOM设置单选按钮、复选框及下拉菜单的方法”，描述中指出该知识点在介绍如何使用JavaScript的文档对象模型（DOM）来控制HTML表单中的单选按钮、复选框以及下拉菜单的行为。具体来说，这...
本文档将详细介绍 jQuery 中与表单相关的常用函数和方法，特别是如何操作输入框（Input）、下拉列表（Select）、单选按钮（Radio）和复选框（Checkbox）等元素。 #### 二、操作Input输入框 在网页表单中，输入框是...