怎样用JS 实现HTML的下拉菜单,以及下拉菜各参数的详细意义

如果使用JS,只能是:

<select name="number">

  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
  <option>26</option>
  <option>27</option>
  <option>28</option>
  <option>29</option>
  <option>30</option>
</select>


如果使用JS:

<html>
 <head>
  <title> New Document </title>
 </head>
 <body>
    <SELECT id="demo_select" NAME="number">     
    </SELECT>
 </body>
 <script>
    var select = document.getElementById("demo_select");
    for(var i=1;i<=30;i++){
        var opt = document.createElement("option");
        opt.value=i;
        opt.text =i;
        select.appendChild(opt);
    }
 </SCRIPT>
</HTML>

具体下拉菜单 option的各个参数是什么呢?看下面介绍,后续是不是很简单就搞定了?

var obj = document.getElementById("selectId");


一 select属性:

length ----------> 顾名思义字指的是下拉框长度

selectedIndex ----> 被选中的文本的索引值

 

二 option属性

text ---------> 返回文本内容

value ---------> 同上效果 获取<option value=""> value的值

selected ---------> 是否被选中 是:true 否:false ; 如果指定true 可以改为选中状态

defaultselected ---> 返回该对象默认是否被选中,true/false

 

三 option方法

增加add() ---------> obj.options.add(new Option("value","text")); 注意new的是Option对象大写O

删除remove() ----> obj.options.remove(obj.selectedIndex);

删除所有----> obj.options.length = 0 ; 不是什么removeAll 长度改0就好了

获取选中value---------> obj.options[obj.selectedIndex].value;

获取选中text ---------> obj.options[obj.selectedIndex].text;

修改---------> obj.options[obj.selectedIndex] = new Option("新文本", "值") ;



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值