`
z_piaoyi
  • 浏览: 22876 次
  • 性别: Icon_minigender_2
  • 来自: 河北
社区版块
存档分类
最新评论

js获取下拉列表选中项的值和文本(select)以及获取单

阅读更多

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

代码 select.htm 示例如下:

=============================================================================
<html>
<head><title>获取下拉列表选中项的值和文本(select)</title></head>
<body>
<script>

//获取下拉列表选中项的文本
function getSelectedText(name){
var obj=document.getElementByIdx_x(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.getElementByIdx_x(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.getElementByIdx_x("oper").value, 虽然跟单选按钮组一样的下拉列表(也是列表项的数组)也是一个数组,用这种方式可以获到下拉列表的值,但是单选按钮组却获不到所选的值。仔细研究了下,总 结如下:

与下拉列表不同,单选按钮须用this.form.oper或者 document.getElementsByName('oper')方式获取该数组对 象,document.getElementByIdx_x('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.getElementByIdx_x('oper')))
<input type="button" name="test2" value="按钮2" onclick="alert('result:'+getRadio(document.getElementByIdx_x('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.getElementByIdx_x('slt')[2].innerText)
<input type="button" name="test6" value="按钮6" onclick="alert(document.getElementByIdx_x('slt')[2].innerText);">


</form>
</body>

分享到:
评论

相关推荐

    javascript获取下拉列表的值

    在JavaScript中,获取下拉列表(也称为选择框或`&lt;select&gt;`元素)的值是一项常见的任务,特别是在处理用户输入和交互时。本篇博文中,我们将深入探讨如何有效地实现这一功能。 首先,我们需要理解HTML中的`&lt;select&gt;`...

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

    alert('下拉列表选中文本: ' + selectedText); var radioGroup = document.getElementsByName('oper'); var selectedRadioValue = getRadio(radioGroup); alert('单选按钮组选中值: ' + selectedRadioValue); ...

    下拉列表选中项的文本值的赋值与取值

    要设置下拉列表选中项的文本值,首先需要确定要设置的值,然后通过JavaScript来实现。假设我们要将"Option Two"设为默认选中项,可以使用以下代码: ```javascript document.getElementById('mySelect')....

    jquery获得select option值

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

    js动态设置select下拉菜单的默认选中项实例

    在select元素中,我们使用option元素来定义下拉列表的每一项,并为其中的一项设置selected属性,使其成为初始选中的项。比如,在这段代码中,value="2"的option被默认选中。 ```html &lt;select name="select" id=...

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

    在本篇文章中,将详细探讨如何使用JavaScript语言在网页中获取用户在下拉列表框(select元素)中选择的文本值。当下拉列表框中的选项发生变化时(即用户选择了新的选项),我们将利用JavaScript来捕获这个变化,并...

    JavaScript html js页面刷新之后下拉菜单选中值不变,在按钮提交后保存下拉列表中值不变

    标题中的“JavaScript html js页面刷新之后下拉菜单选中值不变”是一个常见的前端开发问题,涉及到浏览器缓存、页面状态保持以及JavaScript操作DOM元素的知识点。在这个场景中,开发者希望在用户选择下拉菜单的一项...

    JS中Select下拉列表类(支持输入模糊查询)功能

    JS中Select下拉列表类支持输入模糊查询功能的知识点主要包括以下几个方面: 1. HTML结构设计:实现输入模糊查询功能的下拉列表通常包含一个输入框和一个下拉框。输入框用于用户输入查询字符,下拉框则是提供选项供...

    用jquery获取select标签中选中的option值及文本的示例

    根据提供的文件信息,我们可以了解到如何使用jQuery来获取HTML中select标签的选中项(option)的值(value)和文本内容(text)。以下是详细的知识点: 1. 引入jQuery库:要使用jQuery操作DOM元素,必须先引入...

    JQuery关于下拉列表的操作

    ### JQuery关于下拉列表的操作 ...以上就是利用JQuery操作下拉列表的基本方法,包括获取和设置选中项、清空下拉框、触发事件等。掌握这些技巧将有助于提高前端开发效率,更好地管理和控制用户界面的行为。

    html js 清除select里的值,js控制select增删改,选中,清空, 判断控件是否存在

    在HTML和JavaScript编程中,`&lt;select&gt;`元素用于创建下拉列表,经常需要进行动态操作,比如添加、删除、修改选项,以及选中和清空选中的值。本篇文章将探讨如何通过JavaScript来实现这些功能,并判断控件是否存在。...

    Js操作Select大全(取值、设置选中等等)

    其中,`&lt;select&gt;`标签用于定义下拉列表,而`&lt;option&gt;`标签用于定义列表中的每一项。 #### 三、详细操作指南 ##### 1. 设置特定`value`的项为选中状态 使用`.val()`方法可以方便地设置选中状态。 ```javascript $(...

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

    在JavaScript中,获取下拉列表(`&lt;select&gt;`元素)所选中的文本(`text`)和值(`value`)是一项常见的需求。这在网页交互中尤其有用,例如提交表单时获取用户的选择,或者根据用户的选择做出动态响应。在给出的示例...

    Jquery針對下拉列表操作大全

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

    javascript获取select标签选中的值

    当我们需要获取用户在HTML页面中选择的`&lt;select&gt;`标签(下拉列表)的选项时,JavaScript提供了一些简单的方法。本文将详细介绍如何使用JavaScript以及jQuery来获取选中的值。 首先,通过JavaScript获取`&lt;select&gt;`...

    js处理下拉列表框

    根据给定的信息,本文将详细解释JavaScript代码片段中涉及的关键概念和技术细节,这些技术主要用于处理HTML页面中的下拉列表框。 ### 一、JavaScript与HTML交互基础 在深入解析这段代码之前,我们先来了解一些基本...

    javascript实现无限级级联下拉列表

    在JavaScript编程中,实现无限级联下拉列表是一项常见的需求,尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择,每一级的选择会影响到下一级的显示内容。下面我们将...

    级联下拉列表工具类,js实现

    ### 级联下拉列表工具类:JS实现详解 #### 概述 级联下拉列表是一种在前端开发中常见的交互方式,特别是在处理多层级数据时,它能有效地帮助用户进行选择。本文将深入分析一个名为`ComboSelectFactory`的...

    select下拉列表及联.doc

    在提供的文档中,`dynamicSelect.js`是一个JavaScript脚本,它的主要作用是动态地生成级联的`select`下拉列表。这个脚本依赖于`processCaller.js`和`string.js`两个其他脚本文件,分别负责处理异步请求和字符串操作...

    Jquery 获取input 值

    根据提供的文件信息,我们可以总结出一系列关于如何使用 jQuery 来获取不同类型的输入元素(如 radio 按钮、checkbox 和 select 下拉列表)值的方法。接下来,我们将详细地解析这些方法,并提供相应的代码示例。 ##...

Global site tag (gtag.js) - Google Analytics