`

js获取下拉列表选中项的值和文本(select)以及获取单选按钮(radio)组的值和修改选中项[转]

html 
阅读更多


一、获取下拉列表选中项的值和文本(select)

代码 select.htm 示例如下： 



<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>


原文地址：
http://www.cnblogs.com/raymond19840709/archive/2008/02/14/1068634.html
分享到：
| jsp之jstl标签(c) (转)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    以上示例代码中包含了完整的HTML结构，展示了如何使用JavaScript获取下拉列表的选中值和文本，以及如何获取和修改单选按钮组的选中项。这些技术在实际开发中非常有用，能够帮助开发者更好地处理表单数据。

    jquery获得select option值

    根据提供的文件信息，我们可以总结出一系列关于如何使用jQuery来获取不同类型的表单元素（如文本框、单选按钮、复选框以及下拉列表）的值的方法。下面将详细介绍这些方法及其应用场景。 ### 一、获取文本框(input ...

    jquery操作单选、复选、下拉列表

    - 通过 `[type=radio]` 和 `[checked]` 属性选择器来获取当前被选中的单选按钮的值。 ##### 2. 设置选中状态 - **`$("input[@type=radio][@value=2]").attr("checked",'checked');`** - 使用 `attr()` 方法设置...

    单选按钮控制多个文本域和多个下拉菜单的可修改

    3. 在事件处理函数中，获取选中单选按钮的值，并根据该值判断是否要启用或禁用文本域和下拉菜单。 4. 使用`document.getElementById`或`document.querySelector`等方法获取文本域和下拉菜单元素，然后设置它们的`...

    Jquery針對下拉列表操作大全

    本文将详细介绍如何使用jQuery来操作下拉列表，包括获取和设置选择的文本、值，以及添加和删除选项。 **一、获取Select选择的Text和Value** 1. 通过`$("#select_id").change(function(){...})`，我们可以为下拉...

    jquery获取表单值

    本文将详细讲解如何使用jQuery来获取不同类型的表单控件（如文本框、文本域、单选按钮、复选框、下拉列表）的值。 #### 一、获取表单控件的值 ##### 1. 获取文本框（`&lt;input type="text"&gt;`）的值 文本框是最常见...

    jquery 获得select、radio、checkbox选择的text和value值

    ### jQuery 获取 Select、Radio、Checkbox 的 Text 和 Value 值详解 #### 一、Select 下拉框的操作 在网页开发中，`&lt;select&gt;` 标签用于创建下拉列表，通常用于用户输入时的选择操作。jQuery 提供了简单且强大的...

    JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)

    对于`radio`单选按钮，获取选中的值： ```javascript var radioButtonValue = $("input[@type=radio][@checked]").val(); ``` 设置某个`radio`选中： ```javascript $('input[@name=items]').get(1).checked = true;...

    jQuery选择器让你长点见识

    #### 获取`select`下拉列表的值和文本 获取`select`下拉列表中被选中项的文本和值也是非常常见的需求。下面是一些示例代码： ```javascript // 获取select被选中项的文本 var item = $("select[@name=items] ...

    单选框、下拉列表和简单文件保存的使用代码

    2. Java Swing / AWT：在Java中，我们可以使用`JRadioButton`类创建单选按钮，并使用`ButtonGroup`管理同一组内的单选按钮，确保一次只能选中一个。 二、下拉列表（Drop-down List） 下拉列表提供了一种紧凑的方式...

    radio、checkbox、select等选择标签的总结

    此时，可以通过 JavaScript 获取所有选中项的值。 在实际应用中，开发者经常结合CSS来美化这些元素，使其符合网站的设计风格。JavaScript 或者 jQuery 可以进一步增强交互性，例如动态加载选项、验证用户输入、或者...

    js 获取服务器控件值的代码

    二、获取单选按钮（radio）组的值和修改选中项 单选按钮（radio）组允许用户在多个选项中选择一个。与下拉列表不同，获取单选按钮的值需要额外的处理，因为它们是作为一组（通过相同的名字属性关联）存在的，而不是...

    javascript获值

    本文主要探讨了如何获取三种常见的表单元素——复选框（checkbox）、单选按钮（radio）以及下拉列表（select）的值。 1. **获取复选框（Checkbox）的值**： 复选框在HTML中的`&lt;input type="checkbox"&gt;`标签中定义...

    js实现将选中值累加到文本框的方法

    文档介绍了如何使用JavaScript将下拉列表（select元素）或单选按钮（radio元素）中选中的值累加到文本框（textarea元素）中的方法。以下是实现这一功能所需掌握的关键知识点。 ### 1. HTML表单元素 - **select元素*...

    Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    在实际应用中，通常建议为单选按钮和复选按钮的组添加相同的name属性，并为下拉列表的每个选项明确设置value属性，这样能更清晰地控制数据的流向和表单的行为。熟练运用Vue.js处理表单，不仅可以提升开发效率，还...

    jquery获取表单元素的方法

    本文将详细解析如何使用jQuery获取表单元素的各种值，包括文本框（TEXT）、文本区域（AREA TEXT）、复选框（CHECKBOX）、单选按钮（RADIO）、下拉列表（SELECT）以及表格（TABLE）中的数据。 ### 文本框（TEXT） ...

    JQuery操作select

    例如，`$("#selectTest").change(function() {...})`会在用户更改`selectTest`的选项时触发内部的代码，如显示选中项的文本或修改select的值。 总的来说，jQuery使得在JavaScript中处理select和其他HTML元素变得...

    js使用DOM设置单选按钮、复选框及下拉菜单的方法

    标题中提到的知识点是“js使用DOM设置单选按钮、复选框及下拉菜单的方法”，描述中指出该知识点在介绍如何使用JavaScript的文档对象模型（DOM）来控制HTML表单中的单选按钮、复选框以及下拉菜单的行为。具体来说，这...

    jquery 学习

    本文档将详细介绍 jQuery 中与表单相关的常用函数和方法，特别是如何操作输入框（Input）、下拉列表（Select）、单选按钮（Radio）和复选框（Checkbox）等元素。 #### 二、操作Input输入框 在网页表单中，输入框是...

Magicbox
Global site tag (gtag.js) - Google Analytics