当前位置:首页 » 《随便一记》 » 正文

JS中操作<select>标签选的值

29 人参与  2023年05月05日 14:57  分类 : 《随便一记》  评论

点击全文阅读


JS中操作<select>标签选的值

<select>标签是一种表单控件,用来创建下拉列表。在<select> 标签内可用 <option> 标签定义下拉列表中的可用选项。下面给出一个基本下拉列表示例:

<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <title>基本下拉列表a</title></head><body>    <select id="selectID" style="width:100px;height:30px">        <option>项1</option>        <option>项2</option>        <option>项3</option>        <option>项4</option>    </select>       </body></html>

保存文件名:简单下拉列表示例a.html,用浏览器打开效果:

JS操作下拉列表中的选项

<select>标签下的内容,可以通过JS的操作,获取其对象,获取被选项的索引(index)、值(value)、内容(text)

获取select对象:

var myselect=document.getElementById("selectID");

其中,selectID标识<select>标签id属性值

2.获取选中项的索引:

var index =myselect.selectedIndex; //selectedIndex代表的是你所选中项的 index

3.获取选中项option的value:

myselect.options[index].value;

上句可去掉options[index].写为myselect.value

4.获取选中项option的text:

myselect.options[index].text;

5. 获取选中项的其他值,如有:

<select id="select">

    <option value="A" url="http://www.baidu.com">第一个option</option>

    <option value="B" url="http://www.qq.com">第二个option</option>

</select>

想获取的url:

myselect.options[index].getAttribute('url');

提示:上面是分步写法,现在看看综合写法

对于上面3的综合写法是:

document.getElementById("selectID").value;

document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value;

对于上面4的综合写法是:

document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].text

 下面给出从下拉列表中选择图片显示的示例源码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>演示</title>    <style>        div{             margin:20px;            text-align:center;        }    </style>    <script>         function show() {            document.getElementById("imgID").src = document.getElementById("selectID").value;         }    </script></head><body>    <div >         雪景        <select id="selectID" onchange="show()" style="width:100px;height:30px">            <option value="./雪1.png">雪1</option>            <option value="./雪2.png">雪2</option>            <option value="./雪3.png">雪3</option>        </select>        <br>        <img id="imgID" src="雪1.png" />    </div>     </body></html>

保存文件名:从下拉列表中选择图片显示1b.html,用浏览器打开效果:

用JS将数组中的元素信息添加到下拉列表

先介绍将数组的元素信息添加到下拉列表用到的方法和属性

select标签对象的方法

add() 向下拉列表添加一个选项。

语法:selectobject.add(option,before)

remove() 从下拉列表中删除一个选项.

语法: selectobject.remove(index)

Optiont标签对象的属性

defaultSelected 返回 selected属性的默认值。

index 返回下拉列表中某个选项的索引位置。

Selected 设置或返回 selected 属性的值。

text 设置或返回某个选项的纯文本值。

JS将数组的的元素信息添加到下拉列表,示例源码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>示例</title></head><body>    <form name="form1" action="">        <select name="sel" style="width:100px;height:30px">        </select><br>        <input type="button" value="加载数组的数据项" onclick="addopt()">    </form><script>    var arr=new Array('项1','项2','项3','项4','项5')    var counts=arr.length;    function addopt(){        for(var i=0;i<counts;i++){            // document.form1.sel.options[i]=new Option (arr[i],i)            var opt=document.createElement('option')            opt.text=arr[i]            opt.value=i;            document.form1.sel.add(opt,undefined)        }           }</script></body></html>

保存文件名:数组的数据项添加到下拉列表.html,用浏览器打开效果:


点击全文阅读


本文链接:http://zhangshiyu.com/post/60929.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 鹿雪附加完整在线阅读(小祖宗她带着双宝闹翻天)最近更新列表
  • 你要战功我给你,妖兽入侵你哭啥高质量好文叶天凌筱完本_你要战功我给你,妖兽入侵你哭啥高质量好文(叶天凌筱)
  • 夫君和小三霸占了我的将军府,我杀疯了阅读_雪儿谭绍木兰全集_小说后续在线阅读_无删减免费完结_
  • 鹿溪小说(鹿溪)终章+番外(穿进恐怖游戏后,我和反派HE了)一口气阅读
  • 完结文留给儿子的副卡月月刷爆,他却因睡桥底被送进收容所列表_完结文留给儿子的副卡月月刷爆,他却因睡桥底被送进收容所(娄墨霆宋佑轩)
  • 你活着,却死在我等你的第三年后续+番外_谨言佳佳温以宁全集_小说后续在线阅读_无删减免费完结_
  • 相思溺于夏时雨小说(裴景澈初念可)章节目录+起始篇章(相思溺于夏时雨)全章无套路在线
  • 未婚夫重生归来叫停手术,把剥开肚子的我困在手术台上40分钟(裴临渊阮离歌)
  • 完结文离婚是你提,净身出户你又哭什么精彩分享列表_完结文离婚是你提,净身出户你又哭什么精彩分享(苏铭余素伊)
  • 全书浏览哥哥重生救我,我带队灭了组织!(陈致远陈知韫)_哥哥重生救我,我带队灭了组织!(陈致远陈知韫)全书结局
  • 全文算命赚功德,我直接飞升成仙(楚天河林风)列表_全文算命赚功德,我直接飞升成仙
  • 八零丈夫抛妻弃子后悔不当初完整文本_顾尧全文_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1