javascript 下拉列表select对象的value属性，返回值是啥？

Posted 2023-03-26

是不是option对象中的所有属性？我有些迷糊啦，有谁可以帮我解释下，谢谢啦，

参考技术A select自身并没有value，当用它传递参数时，传递的是它的那个被选中的选项，也就是seleted=seleted的那个option的value,你通过简单的测试也可以得如上所述结果，试一下吧。本回答被提问者采纳 参考技术B <options size="1">
<select value="1">a</select>
<select value="2">b</select>
</options>
选择后 value属性返回他的值 1或者2追问

我看到的下拉列表框都是这么写的：你看下哦！

a
b

我知道select有个value 属性，option也有个value 属性，你看下我举的这个例子了，假如我选择a，select的value属性是不是返回1
很感谢你对我的回答

参考技术C 来学习学习，随便逛逛 参考技术D 在这里问，自己写一个试试不就可以了。印象还深刻。

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>