zoukankan      html  css  js  c++  java
  • javascript 和 下拉列表

    <form id="f">
    <select size="1" name="s">
    <option value="lizi.name">梨子面馆</option>
    <option value="baidu.com">百度</option>
    </select>
    </form>
    
    
    <script type="text/javascript">
    <!--
    var f = document.getElementById("f");
    
    //获得select列表项数目
    document.write(f.s.options.length);
    document.write(f.s.length);
    
    //当前选中项的下标(从0 开始)(有两种方法)
    //如果选择了多项,则返回第一个选中项的下标
    document.write(f.s.options.selectedIndex);
    document.write(f.s.selectedIndex);
    
    //检测某一项是否被选中
    document.write(f.s.options[0].selected);
    
    //获得某一项的值和文字
    document.write(f.s.options[0].value);
    document.write(f.s.options[1].text);
    
    //删除某一项
    f.s.options[1] = null;
    
    //追加一项
    f.s.options[f.s.options.length] = new Option("追加的text", "追加的value");
    
    //更改一项
    f.s.options[1] = new Option("更改的text", "更改的value");
    //也可以直接设置该项的 text 和 value
    //-->
    </script>
    
    
    //全选列表中的项
    function SelectAllOption(list)
    {
    for (var i=0; i<list.options.length; i++)
    {
    list.options[i].selected = true;
    }
    }
    
    
    //反选列表中的项
    function DeSelectOptions(list)
    {
    for (var i=0; i<list.options.length; i++)
    {
    list.options[i].selected = !list.options[i].selected;
    }
    }
    
    
    //返回列表中选择项数目
    function GetSelectedOptionsCnt(list)
    {
    var cnt = 0;
    var i = 0;
    for (i=0; i<list.options.length; i++)
    {
    if (list.options[i].selected)
    {
    cnt++;
    }
    }
    
    return cnt;
    }
    
    
    //清空列表
    function ClearList(list)
    {
    while (list.options.length > 0)
    {
    list.options[0] = null;
    }
    }
    
    
    //删除列表选中项
    //返回删除项的数量
    function DelSelectedOptions(list)
    {
    var i = 0;
    var deletedCnt = 0;
    while (i < list.options.length)
    {
    if (list.options[i].selected)
    {
    list.options[i] = null;
    deletedCnt++;
    }
    else
    {
    i++;
    }
    }
    
    return deletedCnt;
    }
    //此函数查找相应的项是否存在
    //repeatCheck是否进行重复性检查
    //若为"v",按值进行重复值检查
    //若为"t",按文字进行重复值检查
    //若为"vt",按值和文字进行重复值检查
    //其它值,不进行重复性检查,返回false
    function OptionExists(list, optText, optValue, repeatCheck)
    {
    var i = 0;
    var find = false;
    
    if (repeatCheck == "v")
    {
    //按值进行重复值检查
    for (i=0; i<list.options.length; i++)
    {
    if (list.options[i].value == optValue)
    {
    find = true;
    break;
    }
    }
    }
    else if (repeatCheck == "t")
    {
    //按文字进行重复检查
    for (i=0; i<list.options.length; i++)
    {
    if (list.options[i].text == optText)
    {
    find = true;
    break;
    }
    }
    }
    else if (repeatCheck == "vt")
    {
    //按值和文字进行重复检查
    for (i=0; i<list.options.length; i++)
    {
    if ((list.options[i].value == optValue) && (list.options[i].text ==
    
    optText))
    {
    find = true;
    break;
    }
    }
    }
    
    return find;
    }
    
    
    //向列表中追加一个项
    //list 是要追加的列表
    //optText 和 optValue 分别表示项的文字和值
    //repeatCheck 是否进行重复性检查,参见 OptionExists
    //添加成功返回 true,失败返回 false
    function AppendOption(list, optText, optValue, repeatCheck)
    {
    if (!OptionExists(list, optText, optValue, repeatCheck))
    {
    list.options[list.options.length] = new Option(optText, optValue);
    return true;
    }
    else
    {
    return false;
    }
    }
    
    
    //插入项
    //index 插入位置,当插入位置 >= 列表现有项数量时,其作用相当于不进行重复检
    
    查的追加项
    //optText 和 optValue 分别表示项的文字和值
    function InsertOption(list, index, optText, optValue)
    {
    var i = 0;
    for (i=list.options.length; i>index; i--)
    {
    list.options[i] = new Option(list.options[i-1].text, list.options[i-
    
    1].value);
    }
    
    list.options[index] = new Option(optText, optValue);
    }
    //将一个列表中的项导到另一个列表中
    //repeatCheck是否进行重复性检查,参见OptionExists
    //deleteSource项导到目标后,是否删除源列表中的项
    //返回影响的项数量
    function ListToList(sList, dList, repeatCheck, deleteSource)
    {
    //所影响的行数
    var lines = 0;
    var i = 0;
    while (i<sList.options.length)
    {
    if (sList.options[i].selected && AppendOption(dList, sList.options[i].text,
    
    sList.options[i].value, repeatCheck))
    {
    //添加成功
    lines++;
    if (deleteSource)
    {
    //删除源列表中的项
    sList.options[i] = null;
    }
    else
    {
    i++;
    }
    }
    else
    {
    i++;
    }
    }
    
    return lines;
    }
    
    
    //列表中选中项上移
    function MoveSelectedOptionsUp(list)
    {
    var i = 0;
    var value = "";
    var text = "";
    for (i=0; i<(list.options.length-1); i++)
    {
    if (!list.options[i].selected && list.options[i+1].selected)
    {
    value = list.options[i].value;
    text = list.options[i].text;
    list.options[i] = new Option(list.options[i+1].text, list.options
    
    [i+1].value);
    list.options[i].selected = true;
    list.options[i+1] = new Option(text, value);
    }
    }
    }
    
    
    //列表中选中项下移
    function MoveSelectedOptionsDown(list)
    {
    var i = 0;
    var value = "";
    var text = "";
    for (i=list.options.length-1; i>0; i--)
    {
    
    
    if (!list.options[i].selected && list.options[i-1].selected)
    {
    value = list.options[i].value;
    text = list.options[i].text;
    list.options[i] = new Option(list.options[i-1].text, list.options[i-
    
    1].value);
    list.options[i].selected = true;
    list.options[i-1] = new Option(text, value);
    }
    }
    } 
    

      

  • 相关阅读:
    补充 函数详解
    Python web前端 11 form 和 ajax
    进程线程之间的通信
    面向对象epoll并发
    socket发送静态页面
    进程与线程的表示,属性,守护模式
    并发
    django, tornado
    并行
    非阻塞套接字编程, IO多路复用(epoll)
  • 原文地址:https://www.cnblogs.com/xiaofanke/p/3735332.html
Copyright © 2011-2022 走看看