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>