JavaScript 学习-38.HTML DOM 下拉框 Select 对象
前言
HTML 中的下拉列表select 对象的属性和方法
Select 对象属性
| 集合 | 描述 |
|---|---|
| options | 返回包含下拉列表中的所有选项的一个数组。 |
| length | 返回下拉列表中的选项数目。 |
| size | 设置或返回下拉列表中的可见行数。 |
| name | 设置或返回下拉列表的名称。 |
| selectedIndex | 设置或返回下拉列表中被选项目的索引号。 |
| type | 返回下拉列表的表单类型。 |
| form | 返回对包含下拉列表的表单的引用。 |
| multiple | 设置或返回是否选择多个项目。 |
| disabled | 设置或返回是否应禁用下拉列表。 |
获取下拉框属性
<div id="demo">
<p>select 下拉框</p>
<form>
<select name="books-option" id="books">
<option value="1">Python</option>
<option id="x" value="2">JavaScript</option>
<option value="3">Java</option>
</select>
</form>
</div>
<script>
books = document.getElementById('books');
console.log(books);
// length
console.log(books.length) // 3
// 获取name属性
console.log(books.name) // books-option
// 获取选项索引
console.log(books.selectedIndex) // 0
// type 单选还是多选
console.log(books.type ) // select-one
</script>
设置下拉框属性
books = document.getElementById('books');
console.log(books);
// 设置第几个被选中
books.selectedIndex = 1;
console.log(books.selectedIndex) // 0
Select 对象方法
添加和删除下拉框选项
| 方法 | 描述 |
|---|---|
| add() | 向下拉列表添加一个选项。 |
| remove() | 从下拉列表中删除一个选项。 |
add() 方法用于向 <select> 添加一个 <option> 元素。
selectObject.add(option,before)
相关参数
| 参数 | 描述 |
|---|---|
| option | 必需。要添加选项元素。必需是 option 或 optgroup 元素。 |
| before | 在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。 |
使用示例
<div id="demo">
<p>select 下拉框</p>
<form>
<select name="books-option" id="books">
<option value="1">Python</option>
<option id="x" value="2">JavaScript</option>
<option value="3">Java</option>
</select>
</form>
</div>
<script>
books = document.getElementById('books');
console.log(books);
var option=document.createElement("option");
option.text="c++";
// add()
books.add(option)
</script>
add不传第二个参数，默认添加到最后
第二个参数，可以指定添加位置, 比如添加到第一个后面
books = document.getElementById('books');
console.log(books);
var option=document.createElement("option");
option.text="c++";
books.add(option, '1')
如果添加到第一个位置，第二个参数传 0
books.add(option, 0)
remove() 移除一个选项
语法
selectObject.remove(index)
参数index是下拉框的索引位置
<div id="demo">
<p>select 下拉框</p>
<form>
<select name="books-option" id="books">
<option value="1">Python</option>
<option id="x" value="2">JavaScript</option>
<option value="3">Java</option>
</select>
</form>
</div>
<script>
books = document.getElementById('books');
console.log(books);
books.remove(1);
</script>
HTMLOptionsCollection()对象
options 属性返回HTMLOptionsCollection()对象，选项集合
HTMLOptionsCollection()属性
| 属性 | 描述 |
|---|---|
| length | 返回集合的option元素数目 |
| selectedIndex | 设置或者返回select对象已选选项的索引值。(以 0 起始) |
HTMLOptionsCollection()对象 方法
| 方法 | 描述 |
|---|---|
| [index] | 以数字形式指定元素索引 (以 0 开始) |
| [add(element[,index])] | 在集合中添加option元素 |
| item(index) | 以数字索引返回集合中元素 |
| namedItem(name) | 以名称为索引返回集合元素 |
| remove(index) | 从集合中移除元素 |
获取属性示例
<div id="demo">
<p>select 下拉框</p>
<form>
<select id="books">
<option value="1">Python</option>
<option value="2">JavaScript</option>
<option value="3">Java</option>
</select>
</form>
</div>
<script>
books = document.getElementById('books');
console.log(books);
// options 获取全部选项
console.log(books.options) // HTMLOptionsCollection(3) [option, option, option, selectedIndex: 0]
// length 属性
console.log(books.length); // 3
// selectedIndex 被选中索引
console.log(books.selectedIndex ); //0
// 索引取值
console.log(books.options[0]);
console.log(books.options.item(0));
</script>
