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

    轉自:http://www.cnblogs.com/raymond19840709/archive/2008/02/14/1068634.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>

    =============================================================================

    申明

    非源创博文中的内容均收集自网上,若有侵权之处,请及时联络,我会在第一时间内删除.再次说声抱歉!!!

    博文欢迎转载,但请给出原文连接。

  • 相关阅读:
    oracle中Blob和Clob类型的区别
    为什么要分库分表
    Enable file editing in Visual Studio's debug mode
    SQL Server Dead Lock Log
    Debug .NET Framework Source
    SQL Server text field里面有换行符的时候copy到excel数据会散乱
    诊断和修复Web测试记录器(Web Test Recorder)问题
    Can't load Microsoft.ReportViewer.ProcessingObjectModel.dll
    'telnet' is not recognized as an internal or external command
    Linq to XML
  • 原文地址:https://www.cnblogs.com/Athrun/p/1232505.html
Copyright © 2011-2022 走看看