您的位置：首页 > Web前端 > JavaScript

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

2015-10-14 10:14 686 查看
如果使用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("新文本", "值") ;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航