當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript对下拉列表框(select)的操作
生活随笔
收集整理的這篇文章主要介紹了
javascript对下拉列表框(select)的操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[html]?view plaincopy <form?id="f">??? <select?size="1"?name="s">??? <option?value="www.dwww.cn">設計家園</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);??? }??? }??? }
轉載于:https://www.cnblogs.com/yanghj010/p/5109699.html
總結
以上是生活随笔為你收集整理的javascript对下拉列表框(select)的操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Active Record 数据库迁移总
- 下一篇： 昨天日志 今天日志的获取方法