js进阶 9-10  html中单选框和多选框如何遍历下拉列表

一、总结

一句话总结：

1、select元素的options.length可以获取选择长度，然后用options[i]精确定位到选项，用选项元素的selected属性判断选项是否选中，选项的text属性获取选项内容。

2、textarea的value属性获取teaxtarea里面的值

二、js进阶 9-10  html中如何遍历下拉列表

1、案例描述

遍历下拉列表

2、相关知识点

Select 下拉列表

Select 对象集合
  • options[]返回包含下拉列表中的所有选项的一个数组
Select对象属性
  • length返回下拉列表中的选项数目
  • multiple 设置或返回是否选择多个项目。
  • selectedIndex 设置或返回下拉列表中被选项目的索引号。
  • size 设置或返回下拉列表中的可见行数。
  • id/name/disabled/form/tabIndex
Select 对象方法
  • add() 向下拉列表添加一个选项。

    语法：selectobject.add(option,before)

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

    语法: selectobject.remove(index)

  • blur()/focus()
Option 对象的属性
  • defaultSelected 返回 selected属性的默认值。
  • index 返回下拉列表中某个选项的索引位置。
  • Selected 设置或返回 selected 属性的值。
  • text 设置或返回某个选项的纯文本值。
  • disabled/form/id/value......

3、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <style type="text/css">

     select{

             width: 150px;

             background: #ccc;

         }

         textarea{

             width: 150px;

         }

     </style>

 </head>

 <body>

     <form name="form1" action="">

         <select name="sel" size="5" multiple onchange=" mySelect()">

             <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>

         </select><br>

         <textarea name="show" rows="5"></textarea>

     </form>

     <script type="text/javascript">

         function mySelect(){

             var len=document.form1.sel.options.length

             var str=''

             // var len2=document.form1.sel.length

             // alert(document.form1.sel.options[0].text)

             // alert(len2)

             for(var i=0;i<len;i++){

                 if (document.form1.sel.options[i].selected) {

                     str+=document.form1.sel.options[i].text+'\n'

                 }

             }

             // alert(str)

             document.form1.show.value=str

         }

         // mySelect()

     </script>

 </body>

 </html>
 
 

js进阶 9-10 html中如何遍历下拉列表的更多相关文章

  1. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  2. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  3. js进阶 13-1 jquery动画中的显示隐藏函数有哪些

    js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...

  4. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  5. js进阶正则表达式5几个小实例（原样匹配的字符在正则中原样输出）（取反^）

    js进阶正则表达式5几个小实例(原样匹配的字符在正则中原样输出)(取反^) 一.总结 原样匹配的字符在正则中原样输出:var reg4=/第[1-2][0-9]章/g //10-29 取反^:var ...

  6. js进阶 11-14 jquery如何实现元素的替换和遍历

    js进阶  11-14  jquery如何实现元素的替换和遍历 一.总结 一句话总结:替换:replaceAll() 与 replaceWith().遍历:each(). 1.replaceAll() ...

  7. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  8. 10.26最后的模拟DAY2 改造二叉树[中序遍历+严格递增的最长不下降子序列]

    改造二叉树 [题目描述] 小Y在学树论时看到了有关二叉树的介绍:在计算机科学中,二叉树是每个结点最多有两个子结点的有序树.通常子结点被称作“左孩子”和“右孩子”.二叉树被用作二叉搜索树和二叉堆.随后他 ...

  9. js实现随机选取[10,100)中的10个整数，存入一个数组，并排序。 另考虑(10,100]和[10,100]两种情况。

    1.js实现随机选取[10,100)中的10个整数,存入一个数组,并排序. <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. TextView-shadow 阴影实现

    直接上代码 1)实现普通效果 <TextView android:layout_width="match_parent" android:layout_height=&quo ...

  2. 支持10W高并发请求的IIS Web服务器常用设置

    支持高并发的IIS Web服务器常用设置   适用的IIS版本:IIS 7.0, IIS 7.5, IIS 8.0 适用的Windows版本:Windows Server 2008, Windows ...

  3. datetime小练习

    题目: 1.计算你的生日比如近30年来(1990-2019),每年的生日是星期几,统计一下星期几出现的次数比较多2,生日提醒,距离生日还有几天 # !/usr/bin/env python # -*- ...

  4. Java Web学习总结（12）——使用Session防止表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  5. 洛谷 P1205 [USACO1.2]方块转换 Transformations

    P1205 [USACO1.2]方块转换 Transformations 题目描述 一块N x N(1<=N<=10)正方形的黑白瓦片的图案要被转换成新的正方形图案.写一个程序来找出将原始 ...

  6. 【COGS1672】【SPOJ375】QTREE

    这是我的第一个边权链剖 COGS上和SPOJ有点不一样就是没有多组数据了本质还是一样的 我写的是COGS那个事实上改一改就能够去SPOJ AC了= -= (但是我如今上不去SPOJ卧槽(╯‵□′)╯︵ ...

  7. amazeui学习笔记--css（常用组件14）--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  8. PAL相机

    输入时钟:27M PCLK:54M SDRAM时钟:80M ADV7393时钟:27M 1024*768 60帧    65MHZ

  9. 【例题 6-16 UVa 10129】Play on Words

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 入度减去出度个数为1的点和为-1的点各有1个,然后其他点入度减去出度为0 或者全都是入度为0的点即可. [代码] #include ...

  10. JavaScript字符串替换replace方法

    在日常的js开发中, 当要把字符串中的内容替换时,如果使用类似C#的string.replace方法,如下 var str='aabbccaa'; str=str.replace('aa','dd') ...