JavaScript 学习-38.HTML DOM 下拉框 Select 对象开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

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

集合	描述
options	返回包含下拉列表中的所有选项的一个数组。
length	返回下拉列表中的选项数目。
size	设置或返回下拉列表中的可见行数。
name	设置或返回下拉列表的名称。
selectedIndex	设置或返回下拉列表中被选项目的索引号。
type	返回下拉列表的表单类型。
form	返回对包含下拉列表的表单的引用。
multiple	设置或返回是否选择多个项目。
disabled	设置或返回是否应禁用下拉列表。

<div id="demo">
    <p>select 下拉框</p>
        <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>
<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

方法	描述
add()	向下拉列表添加一个选项。
remove()	从下拉列表中删除一个选项。

selectObject.add(option,before)

参数	描述
option	必需。要添加选项元素。必需是 option 或 optgroup 元素。
before	在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。

<div id="demo">
    <p>select 下拉框</p>
        <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>
<script>
    books = document.getElementById('books');
    console.log(books);
    var option=document.createElement("option");
    option.text="c++";
    // add()
    books.add(option)
</script>

    books = document.getElementById('books');
    console.log(books);
    var option=document.createElement("option");
    option.text="c++";
    books.add(option, '1')

books.add(option, 0)

selectObject.remove(index)

<div id="demo">
    <p>select 下拉框</p>
        <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>
<script>
    books = document.getElementById('books');
    console.log(books);
    books.remove(1);
</script>

属性	描述
length	返回集合的option元素数目
selectedIndex	设置或者返回select对象已选选项的索引值。(以 0 起始)

方法	描述
[index]	以数字形式指定元素索引 (以 0 开始)
[add(element[,index])]	在集合中添加option元素
item(index)	以数字索引返回集合中元素
namedItem(name)	以名称为索引返回集合元素
remove(index)	从集合中移除元素

<div id="demo">
    <p>select 下拉框</p>
        <select id="books">
            <option value="1">Python</option>
            <option value="2">JavaScript</option>
            <option value="3">Java</option>
        </select>
    </form>
<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

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

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

前言

Select 对象属性

Select 对象方法

add() 方法用于向 <select> 添加一个 <option> 元素。

remove() 移除一个选项

HTMLOptionsCollection()对象