• 怎样得到select所有option里的值


    问:
    一个页面里有个复选select 因为option是动态变化的
    我想在提交后得到这个select里所有option的value
    <select multiple name=test>
       <option value=1>1</option>
    <option value=2>2</option>
    </select>
    不管是否选中
    那位能告诉我怎么做
    ______________________________________________________________________________________________
    答1:
    var o = document.formName.test
    s="
    for(i=0;i<o.options.length;i++){
    s+=o.options[i].text+":"
    if(o.options[i].selected) alert(o.options[i].text)
    }
    alert(s)
    ______________________________________________________________________________________________
    答2:
    最好别用test做名字,会有错的
    ______________________________________________________________________________________________
    答3:
    提交后要想得到所有的value
    必须在提交之前把所有option置为选中

    listLength = Frm.selectOperPoint.options.length;
    for(i=0;i<listLength;i++)
    {
          Frm.selectOperPoint.options[i].selected = true;
    }
    ______________________________________________________________________________________________
    答4:
    这个语句只能在test所在的页面使用吧,我要在提交后的页面得到结果
    ______________________________________________________________________________________________
    答5:
    我向做的是个就业系统,里面有个就业地点选择,这个是多选的,是由另外一个多选select
    点击到另外一个复选select的,我里面有个功能就是移除所选中的option
    我想提交后能得到所有option的值,因为一个option代表一个用户愿意工作的地点
    ______________________________________________________________________________________________
    答6:
    我看网易的就业系统就是这样做的 ,但是我不知道他那个怎么处理提交后的数据,把用户选中地点存到数据库,我想他应该是得到了所有option的值,而且我试了,他是你不管是否选中,都能得到所有的值
    ______________________________________________________________________________________________
    答7:
    <html>
    <script language="javascript">
    function btnClick()
    {
    var i
    var s=""
    for(i=0;i<document.all.item("num").length;i++)
    {
      s=s+document.all.item("num").options[i].value+","
      alert(s)
    }

    document.all.item("result").value=s
    alert(
    "s="+document.all.item("result").value)
    document.all.item("fmSel").submit
    }
    </script>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>New Page 1</title>
    </head>

    <body>
    <form name=fmSel action"">
    <select name=num size=1 ><option value=1>1</option><option value=2>2</option></select>
    <input type=hidden name=result value="">
    <input type=button name=btn value=click onclick="btnClick();">
    </form>
    </body>

    </html>

    ______________________________________________________________________________________________
    答8:
    options[i].text
    ______________________________________________________________________________________________
    答9:
    option 操作的例子
    htm
    <html>
    <head>
    <style type="text/css">
    TABLE {
     100%;
    }
    TD {
     text-align:center;
    }
    SELECT {
     behavior:url("list.htc");100px;height:200px;
    }
    INPUT {
     behavior:url("list.htc")
    }
    </style>
    </head>
    <body>
    <table>
     <tr>
      <td colspan="3">删除移动的项、检查重复项、按照value排序(从小到大)</td>
     </tr>
     </tr>
      <td>
       <select id="aaa" multiple ref="bbb" order="value" deleted check>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
       </select>
      </td>
      <td>
       <input type="button" value="全部选择" ref="aaa" selectall><br>
       <input type="button" value="    > >    " ref="aaa"><br>
       <input type="button" value="    < <    " ref="bbb"><br>
       <input type="button" value="全部取消" ref="bbb" selectall><br>
      </td>
      <td>
       <select id="bbb" multiple ref="aaa" order="value" deleted check>
        <option value="7">7</option>
       </select>
      </td>
     </tr>
    </table>
    <hr>
    <table>
     <tr>
      <td colspan="3">不删除移动的项、不检查重复项、按照ord倒序(从大到小)</td>
     </tr>
     </tr>
      <td>
       <select id="ccc" multiple ref="ddd" order="ord" desc>
        <option value="1" ord="1">1</option>
        <option value="2" ord="5">2</option>
        <option value="3" ord="2">3</option>
        <option value="4" ord="6">4</option>
        <option value="5" ord="3">5</option>
        <option value="6" ord="7">6</option>
       </select>
      </td>
      <td>
       <input type="button" value="全部选择" ref="ccc" selectall><br>
       <input type="button" value="    > >    " ref="ccc"><br>
       <input type="button" value="    < <    " ref="ddd"><br>
       <input type="button" value="全部取消" ref="ddd" selectall><br>
      </td>
      <td>
       <select id="ddd" multiple ref="ccc" order="ord" desc>
        <option value="7" ord="4">7</option>
       </select>
      </td>
     </tr>
    </table>
    <hr>
    <table>
     <tr>
      <td colspan="3">不删除移动的项、检查重复项、按照ord倒序(从大到小)</td>
     </tr>
     </tr>
      <td>
       <select id="eee" multiple ref="fff" order="ord" desc check>
        <option value="1" ord="1">1</option>
        <option value="2" ord="5">2</option>
        <option value="3" ord="2">3</option>
        <option value="4" ord="6">4</option>
        <option value="5" ord="3">5</option>
        <option value="6" ord="7">6</option>
       </select>
      </td>
      <td>
       <input type="button" value="全部选择" ref="eee" selectall><br>
       <input type="button" value="    > >    " ref="eee"><br>
       <input type="button" value="    < <    " ref="fff"><br>
       <input type="button" value="全部取消" ref="fff" selectall><br>
       <input type="button" value="选中左边列表所有的项" onclick="eee.selectAll()"><br>
       <input type="button" value="取消左边列表中选中的项" onclick="eee.selectNone()"><br>
       <input type="button" value="删除左边列表中选中的项" onclick="eee.deleted()"><br>
      </td>
      <td>
       <select id="fff" multiple ref="eee" order="ord" desc check>
        <option value="7" ord="4">7</option>
       </select>
      </td>
     </tr>
    </table>
    </body>
    </html>

    ______________________________________________________________________________________________
    答10:
    list.htc

    //删除所有选中的项
    <PUBLIC:METHOD NAME="deleted" />
    //选中所有项
    <PUBLIC:METHOD NAME="selectAll" />
    //取消选中的项
    <PUBLIC:METHOD NAME="selectNone" />
    <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()" />
    <PUBLIC:ATTACH EVENT="ondblclick"  ONEVENT="doDblClick()" />
    <script language="JScript">
    //从列表框中删除所有选中的项。如果obj为null,则列表框为自身。
    function deleted(obj) {
     if (obj == null) obj = element;
     if (obj.tagName != "SELECT") return;
     for (var i=obj.options.length-1;i>=0;i--) {
      if (obj.options[i].selected) {
       obj.options.remove(i);
      }
     }
    }
    //选中给定的列表框中所有的项。如果obj为null,则列表框为自身。
    function selectAll(obj) {
     if (obj == null) obj = element;
     if (obj.tagName != "SELECT") return;
     var length = obj.options.length;
     for (var i=0;i<length;i++) {
      obj.options[i].selected = true;
     }
    }
    //取消给定的列表框中所有选中的项。如果obj为null,则列表框为自身。
    function selectNone(obj) {
     if (obj == null) obj = element;
     if (obj.tagName != "SELECT") return;
     var length = obj.options.length;
     for (var i=0;i<length;i++) {
      obj.options[i].selected = false;
     }
    }
    //检查obj列表框中是否已经存在选项opt
    function optionExists(obj,opt) {
     var length = obj.options.length;
     for (var i=0;i<length;i++) {
      if (obj.options[i].text == opt.text && obj.options[i].value == opt.value) //如果一个选项的值和文本与给定的选项相同,则表明存在。
       return true;
     }
     return false; //如果不存在,则返回false
    }
    //将列表框obj1中选中的项添加到obj2列表框中,check=true表示不向obj2中的添加重复项
    function add(obj1,obj2,check) {
     for (var i=0;i<obj1.options.length;i++) {
      if (obj1.options[i].selected) {  //如果选项被选中,则需要加入到obj2中。
       if (check) { //需要进行重复性检查
        if (optionExists(obj2,obj1.options[i])) { //如果obj2列表框中存在指定的选项,进行下一个循环
         continue;
        }
       }
       var opt = obj1.options[i].cloneNode(false);
       opt.text = obj1.options[i].text;
       obj2.options.add(opt);  //将选项加入到ojb2中。
      }
     }
    }
    //排序,obj为列表框对象,order为排序属性,desc为是否倒序(true-倒序),采用冒泡算法的改进算法
    function orderList(obj,order,desc) {
     var chg = null;
     var flag = true; //是否进行过交换的标志
     var m = null;
     var n = null;
     var len = obj.options.length - 1;
     for (var j=len;j>0;j--) {
      flag = true;
      for (var k=0;k<j;k++) {
       eval("m = parseFloat(obj.options[k]." + order + ");");
       eval("n = parseFloat(obj.options[k+1]." + order + ");");
       if (desc) {  //如果是倒序排列,则交换m和n
        var tt = m;
        m = n;
        n = tt;
       }
       if (m > n) { //如果m > n 交换两个选项
        chg = obj.options[k].cloneNode(false);
        chg.text = obj.options[k].text;
        obj.options[k] = obj.options[k+1].cloneNode(false);
        obj.options[k].text = obj.options[k+1].text;
        obj.options[k+1] = chg.cloneNode(false);
        obj.options[k+1].text = chg.text;
        flag = false;  //交换过,设为false
       }
      }
      if (flag) break;  //如果一次都没有交还,则退出
     }
    }
    //事件处理
    function doEvent() {
     var obj1 = null;  //列表框1变量
     if (window.event.srcElement.tagName == "SELECT") { //如果触发元素是select
      obj1 = window.event.srcElement;  //obj为触发的select
     }
     else if (window.event.srcElement.tagName == "OPTION") { //如果触发元素是option
      obj1 = window.event.srcElement.parentElement;  //obj为触发元素的父元素select
     }
     else {
      if (typeof(window.event.srcElement.ref) != "undefined") { //如果ref被定义过
       obj1 = window.document.getElementById(window.event.srcElement.ref); //obj为定义的元素。
       if (obj1 == null) return;
      }
      else
       return;
     }
     if (obj1 == null) return;  //如果obj为空,直接返回。
     if (obj1.tagName != "SELECT") return; //如果返回的obj不是列表框,直接返回。
     if (typeof(obj1.ref) == "undefined") return;  //没有指定目的列表框,直接返回。
     var obj2 = window.document.getElementById(obj1.ref);
     if (obj2 == null) return; //没有找到目的列表框,直接返回
     if (obj2.tagName != "SELECT") return; //指定的目的不是列表框,返回。
     if (typeof(window.event.srcElement.selectall) != "undefined") {  //如果定义了全部选择
      selectAll(obj1);
     }
     var check = (typeof(obj2.check) != "undefined") ? true : false;  //判断是否定义了检查重复项
     add(obj1,obj2,check);  //在ojb2中添加obj1中选中的项。
     if (typeof(obj1.deleted) != "undefined") { //如果定义了删除原项
      deleted(obj1);  //删除原项
     }
     if (typeof(obj2.order) != "undefined") {  //指定需要排序
      var order = obj2.order;
      var desc = (typeof(obj2.desc) == "undefined") ? false : true;  //判断是否定义了倒序
      orderList(obj2,order,desc);  //排序
     }
    }
    //处理单击事件
    function doClick() {
     if (window.event.srcElement.tagName == "SELECT" || window.event.srcElement.tagName == "OPTION") return;
     doEvent();
    }
    //处理双击事件
    function doDblClick() {
     doEvent();
    }
    </script>

  • 相关阅读:
    骆驼命名法,帕斯卡命名法和匈牙利命名法<转>
    海量数据库查询优化<转>
    备份数据库并生成Rar
    标准http状态码[英文注释版本]<转>
    IIS自动停止,iis自动关闭。应用程序池假死、自动重启以及iis权限等解决办法 <转>
    Flex/Silverlight的技术比较<转>
    .NET平台测试驱动开发模拟框架Moq简明教程(实例剖析)<转>
    VisualStudio用IE8调试时遇到的问题(转)
    English learning
    JS调用WebService示例
  • 原文地址:https://www.cnblogs.com/goody9807/p/1029434.html
Copyright © 2020-2023  润新知