layui下拉框的使用及取值

最新推荐文章于 2025-02-11 16:59:51 发布

原创最新推荐文章于 2025-02-11 16:59:51 发布 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

layui

本文介绍了一个教育平台中教师选择课程的功能，使用了HTML、CSS和jQuery构建的前端下拉菜单，展示了如何通过layui框架实现交互。重点在于教师角色的配置和前端开发实践。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>教学平台</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="sources/layui/css/layui.css" media="all">
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">教师</label>
        <div class="layui-input-block">
            <select name="teacher" lay-filter="teacher" id="teacher">
                <option value="teacher1">teacher1</option>
                <option value="teacher2">teacher2</option>
                <option value="teacher3">teacher3</option>
                <option value="teacher4">teacher4</option>
                <option value="teacher5">teacher5</option>
            </select>
        </div>
    </div>
</form>
<script src="sources/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('form', function () {
        var form = layui.form;

        //各种基于事件的操作，下面会有进一步介绍
    });
</script>
<script>
    var flag = $("#teacher").val()
</script>
</body>
</html>

在这里插入图片描述