JS 实现下拉框回显

原创于 2021-05-29 22:13:38 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery

前端小例题专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用JavaScript来实现下拉框的选择项回显，主要通过代码示例展示了具体的实现过程，适用于网页交互中的数据展示场景。

JS 实现下拉框回显

学习内容：
- 需求
总结：

学习内容：

需求

用 JS 实现下拉框回显

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>下拉框回显</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
    <script>
        function echo() {
            // eq() 方法将匹配元素集缩减值指定 index 上的一个，整数，指示元素的位置（最小为 0）
            // $('#s1').val("3");
            $('#s1 > option:eq(2)').prop('selected', true);
        }
    </script>
</head>
<body>
<select id="s1">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
</select>
<br/>
<input type="button" value="回显第3个选项" onclick="echo();"/><br/>
</body>
</html>