JavaScript 学习-38.HTML DOM 下拉框 Select 对象

Posted 2022-06-06 上海-悠悠

前言

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>