JavaScript之Select和Option对象

最新推荐文章于 2022-12-17 16:08:21 发布

JZJZY

最新推荐文章于 2022-12-17 16:08:21 发布

阅读量1.4k

点赞数 1

文章标签： JavaScript 前端 Option Select

本文链接：https://blog.csdn.net/weixin_43772533/article/details/107162973

版权

Select
代表HTML表单中的一个下拉列表

Select对象常用属性、方法和事件
在这里插入图片描述

Option
代表HTML表单中下拉列表中的一个选项
在HTML表单中标签每出现一次，一个Option对象就会被创建

Option对象常用属性
text：设置或返回某个选项的纯文本值
value：设置或返回被送往服务器的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var $ = function (id) {
            return document.getElementById(id);
        };

        window.onload = function () {
            $("btnGet").onclick = function () {
                var degree = $("degree");
                console.log("数量：" + degree.length);
                var options = degree.options;
                console.log("当前选中项的索引：" + degree.selectedIndex);
                console.log("当前选中项的内容：" + options[degree.selectedIndex].text);
            };

            $("btnAdd").onclick = function () {
                var option = new Option("初中", "chuzhong");
                $("degree").add(option, degree.options[1]); //添加为第2个
            };

            $("btnClear").onclick = function () {
                $("degree").length = 0;
            };

            $("btnSelect").onclick = function () {
                $("degree").selectedIndex = 3; //设置选中索引为3的选项
            };
        };

        function getDegree(obj) {
            console.log("当前选中的值：" + $("degree").value); //非标准属性，获取当前下拉列表中选中项的值
            console.log("当前选中的值：" + obj.value);
        }
    </script>
</head>

<body>
    <select id="degree" onchange="getDegree(this)">
        <option value="0">--请选择学历--</option>
        <option value="gaozhong">高中</option>
        <option value="dazhuan">大专</option>
        <option value="benke">本科</option>
        <option value="yanjiusheng">研究生</option>
        <option value="boshi">博士</option>
    </select>
    <input type="button" value="获取下拉列表信息" id="btnGet">
    <input type="button" value="添加选项" id="btnAdd">
    <input type="button" value="清空下拉列表" id="btnClear">
    <input type="button" value="选中本科" id="btnSelect">
</body>

</html>

在这里插入图片描述

JZJZY

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之Select和Option对象

Select代表HTML表单中的一个下拉列表Select对象常用属性、方法和事件Option代表HTML表单中下拉列表中的一个选项在HTML表单中标签每出现一次，一个Option对象就会被创建Option对象常用属性text：设置或返回某个选项的纯文本值value：设置或返回被送往服务器的值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫