下拉回显问题案例大全

最新推荐文章于 2024-08-16 17:52:56 发布
最新推荐文章于 2024-08-16 17:52:56 发布
阅读量717 收藏
点赞数 1
文章标签： java bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52236586/article/details/135853841
版权

下拉回显问题案例大全

在这里插入图片描述

一、原生js案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉框数据回显优化</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        label {
            margin-right: 10px;
        }

        input,
        select {
            padding: 5px;
        }

        button {
            padding: 5px 10px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <label for="categoryInput">输入分类名称:</label>
        <input type="text" id="categoryInput">
        <button id="searchButton" style="margin-left: 10px;">下拉框回显</button>
    </div>
    <div class="container">
        <label for="categorySelect">选择分类:</label>
        <select id="categorySelect"></select>
    </div>

    <script>
        // 假设你的 JSON 数据更具体
        const jsonData = [
            { id: 1, name: "电子产品" },
            { id: 2, name: "家具" },
            { id: 3, name: "服装" },
            { id: 4, name: "食品" },
            { id: 5, name: "图书" },
            { id: 6, name: "鞋类" },
            // 添加更多分类...
        ];

        // 获取输入框、按钮和 select 元素
        const categoryInput = document.getElementById("categoryInput");
        const selectElement = document.getElementById("categorySelect");
        const searchButton = document.getElementById("searchButton");

        // 遍历 JSON 数据，创建 option 元素并添加到 select 中
        jsonData.forEach(category => {
            const option = document.createElement("option");
            option.value = category.id;
            option.text = category.name;
            selectElement.appendChild(option);
        });

        // 添加按钮点击事件监听器以实现搜索和回显选中的值
        searchButton.addEventListener("click", function () {
            const inputValue = categoryInput.value;
            // 在 select 中查找匹配的选项
            const matchingOption = Array.from(selectElement.options).find(option => option.text === inputValue);
            console.log(matchingOption)
            console.log(matchingOption.value)
            if (matchingOption) {
                selectElement.value = matchingOption.value;
            } else {
                // 如果没有匹配项，将选择框重置为空
                selectElement.value = "";
            }
        });
    </script>
</body>

</html>

二、Jquery案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉框数据回显优化 - jQuery 版本</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        label {
            margin-right: 10px;
        }

        input,
        select {
            padding: 5px;
        }

        button {
            padding: 5px 10px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <label for="categoryInput">输入分类名称:</label>
        <input type="text" id="categoryInput">
        <button id="searchButton" style="margin-left: 10px;">下拉框回显</button>
    </div>
    <div class="container">
        <label for="categorySelect">选择分类:</label>
        <select id="categorySelect"></select>
    </div>

    <script>
        // 假设你的 JSON 数据更具体
        const jsonData = [
            { id: 1, name: "电子产品" },
            { id: 2, name: "家具" },
            { id: 3, name: "服装" },
            { id: 4, name: "食品" },
            { id: 5, name: "图书" },
            { id: 6, name: "鞋类" },
            // 添加更多分类...
        ];

        // 获取输入框、按钮和 select 元素
        const categoryInput = $("#categoryInput");
        const selectElement = $("#categorySelect");
        const searchButton = $("#searchButton");

        // 遍历 JSON 数据，创建 option 元素并添加到 select 中
        jsonData.forEach(category => {
            const option = $("<option></option>").val(category.name).text(category.name);
            selectElement.append(option);
        });

        // 添加按钮点击事件监听器以实现搜索和回显选中的值
        searchButton.click(function () {
            const inputValue = categoryInput.val();
            // 在 select 中查找匹配的选项
            const matchingOption = selectElement.find('option[value="' + inputValue + '"]');
            if (matchingOption.length > 0) {
                selectElement.val(matchingOption.val());
            } else {
                // 如果没有匹配项，将选择框重置为空
                selectElement.val("");
            }
        });
    </script>
</body>

</html>

三、LayUI案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layui 下拉框数据回显</title>
    
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- 引入 Layui 库 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.css">
</head>

<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择分类</label>
                        <div class="layui-input-inline">
                            <select id="categorySelect" lay-verify="required">
                                <option value="">请选择分类</option>
                                <option value="1">电子产品</option>
                                <option value="2">家具</option>
                                <option value="3">服装</option>
                                <option value="4">食品</option>
                                <!-- 添加更多分类... -->
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" id="categoryInput" placeholder="输入分类名称" class="layui-input">
                        </div>
                        <button id="searchButton" class="layui-btn layui-btn-normal">回显</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 Layui 的 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script>
    
    <!-- JavaScript 代码 -->
    <script>
        layui.use('form', function () {
            const form = layui.form;

            // 给 select 添加 lay-filter 属性
            form.on('select(categorySelect)', function (data) {
                $('#categoryInput').val(data.elem[data.elem.selectedIndex].text);
            });

            // 给搜索按钮添加点击事件
            $('#searchButton').on('click', function () {
                const inputValue = $('#categoryInput').val();
                const selectElem = $('#categorySelect');
                const optionElem = selectElem.find('option:contains(' + inputValue + ')');
                if (optionElem.length > 0) {
                    selectElem.val(optionElem.val());
                    form.render('select');
                } else {
                    selectElem.val('');
                    form.render('select');
                }
            });
        });
    </script>
</body>

</html>

四、Bootstrap案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 下拉框数据回显</title>

    <!-- 引入 Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <form>
                    <div class="form-group">
                        <label for="categorySelect">选择分类</label>
                        <select class="form-control" id="categorySelect">
                            <option value="">请选择分类</option>
                            <option value="1">电子产品</option>
                            <option value="2">家具</option>
                            <option value="3">服装</option>
                            <option value="4">食品</option>
                            <!-- 添加更多分类... -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="categoryInput">输入分类名称</label>
                        <input type="text" class="form-control" id="categoryInput" placeholder="输入分类名称">
                    </div>
                    <button type="button" class="btn btn-primary" id="searchButton">回显</button>
                </form>
            </div>
        </div>
    </div>

    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function () {
            // 给搜索按钮添加点击事件
            $("#searchButton").click(function () {
                const inputValue = $("#categoryInput").val();
                const selectElement = $("#categorySelect");
                const matchingOption = selectElement.find("option:contains(" + inputValue + ")");
                if (matchingOption.length > 0) {
                    selectElement.val(matchingOption.val());
                } else {
                    // 如果没有匹配项，将选择框重置为空
                    selectElement.val("");
                }
            });

            // 当选择项发生变化时，将选中项的文本显示在输入框中
            $("#categorySelect").change(function () {
                const selectedOption = $("#categorySelect option:selected");
                $("#categoryInput").val(selectedOption.text());
            });
        });
    </script>
</body>

</html>

五、Vue案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js + Element UI 下拉框数据回显</title>

    <!-- 引入 Vue.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <!-- 引入 Element UI 库 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app" class="container">
        <div class="row">
            <div class="col-md-6">
                <el-form :model="form" ref="form" label-width="80px">
                    <el-form-item label="选择分类">
                        <el-select v-model="form.selectedCategory" placeholder="请选择分类">
                            <el-option label="电子产品" value="电子产品"></el-option>
                            <el-option label="家具" value="家具"></el-option>
                            <el-option label="服装" value="服装"></el-option>
                            <el-option label="食品" value="食品"></el-option>
                            <!-- 添加更多分类... -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="输入分类">
                        <el-input v-model="form.inputCategory" placeholder="输入分类名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="echoCategory">回显</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                form: {
                    selectedCategory: '',
                    inputCategory: ''
                }
            },
            methods: {
                echoCategory: function () {
                    // 设置输入框的值为选中的值
                    this.form.selectedCategory = this.form.inputCategory;
                }
            }
        });
    </script>
</body>

</html>
就叫飞六吧
关注
安卓开发Android studio学习笔记11：常用控件 - 下拉列表(案例演示)
那人独钓寒江雪
10-23 930
【代码】安卓开发Android studio学习笔记11：常用控件 - 下拉列表(案例演示)
el-cascader 回显 下拉框最后一级定位在上一次位置 解决方案
qq_37592561的博客
07-10 2479
el-cascader 下拉框回显问题回显定位还是在上一次位置解决方法 回显定位还是在上一次位置 解决方法 增加ref属性 <el-cascader v-model="modeValue" :options="modeOptions" @change="modeChange" ref="cascader" :props="{ checkStrictly: true ,value: 'modId', label: 'modName', children: 'nextModu
下拉列表框回显
m1234ilu的博客
01-16 1167
后台代码 request.setAttribute("allNames", allNames); request.setAttribute("name", name); 前台jsp &lt;form id="filterForm1" action="${ctx}/pzproject/tab/1"method="POST"&gt; &lt;div class="hea
JS 实现下拉框回显
zzvar的博客
05-29 3806
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-
el-select 回显操作
qq_57952018的博客
08-16 909
el-select 回显操作
vue动态选取下拉框时回显为value
q_1092535160的博客
02-02 755
仅作为学习笔记，供大家参考。
下拉选择框回显
weixin_57400398的博客
05-05 1222
下拉框的回显
el-select下拉框远程搜索且多选时，编辑需要回显的一个简单案例
天渺(喵)工作室
04-21 3547
前端业务开发中不管使用vue2~3，还是react，angular各种前端技术栈，经常会遇到这种业务。一个下拉框Select中，不仅需要需要**支持远程模糊搜索，还需要支持多选。并且在编辑时，还能正常把已经多选好的内容回显到Select中。** #### 用Vue3+ElementPlus+TS举一个简单的案例。
下拉框数据回显问题，查询表中数据显示到下拉框中
SUMMERENT的博客
11-01 1746
<select> <option value="" <if item ==""> selected </if> ></option> <option value="AAA" <if item =="AAA">selected </if> >AAA</option> <option value="BBB" <if item =="BBB">selected.
解决element ui select下拉框不回显数据问题的解决
10-17
然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个问题，并提供解决方案。 问题描述： 当使用`el-select`组件绑定数据模型（`v-model`）时，下拉框在编辑表单时...
Java之jsp自定义标签与通用分页案例
m0_62528678的博客
06-27 468
自定义jsp标签与通用分页的界面
书城后台管理系统（添加；批量删除；回显修改；多条件查询；分页）
不再的blog
02-22 3298
书本信息的增删改查案例 书城的全部书本查询 基本思路即为findAllBook()，很简单 主要代码如下: dao: public List&lt;Book&gt; getAllBook() throws SQLException { QueryRunner qr = new QueryRunner(DBCPUtil.getDataSource()); ...
关于下拉框数据回显得解决方案
愿你安稳的博客
08-28 1325
代码不多，理解也容易，直接上代码 关于性别的回显方式，数据是静态不变的， 如图： <select id="sex" name="sex"> <option value="1" <c:if test="${user.sex==1}">selected</c:if>>男</option> <option valu...
下拉框的回显
Garry
11-18 378
<th width="30%"><b>*</b>员工标签：</th> <td width="20%"> <select id="employeeLabelId" name="employeeInfo.employeeLabelId"> ...
【vue2+element ui】添加修改共用表单的下拉框回显问题分析以及解决方案（附共用表单代码）
Ez4Sterben的博客
07-20 4057
本人前端水平不佳，本文分享在编写个人项目前端代码的时候遇到的回显问题的解决办法，仅供参考。
Vue ——下拉框数据及数据回显
月来better
08-18 5725
下拉框默认显示第一个数据，及获取下拉框中选择的任意数据： <label>类型：</label> <select v-model="value_type" @change="getvalue_typeected(value_type)"> <option :value="item" v-for="item in types" :key="item">{{ item }}</option> </select> e
下拉框回显
AAALEXQAQ的博客
08-05 302
【代码】下拉框回显。
下拉框数据回显问题的实现
weixin_41113108的博客
03-12 2156
思路：①将选中的下拉框的信息的ID传给后台，然后在后台放到request域中      ②在前台接收下拉框信息的同时一并接收选中信息，在遍历的同时进行&lt;c:if&gt;判断，若匹配则selected具体代码：1、在handler中，将选中的信息放在request中mv.addObject("cust_source", customer.getCust_source()); mv.addO...
下拉框回显功能
huan1213858的博客
04-03 2317
前端实现下拉框回显 <select id="productGroup" class="form-control" name="groupIdInForm"> <option value="0" selected>请选择分类</option> <c:forEach items="${allGroups}" var="group"> <option value="${group.id}" <c
el-select下拉回显""
最新发布
09-21
`el-select`是Element UI库中的一个下拉选择组件，用于展示选项供用户选择。如果需要实现下拉框显示空字符串 "" 的回显效果，通常是在数据绑定或者初始化的时候设置`value`属性为这个空字符串。例如，在Vue中可以这样做： ```html <template> <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" ></el-option> </el-select> </template> <script> export default { data() { return { selectedValue: "", // 这里设置初始值为空字符串 options: [...], // 你的选项列表 }; }, }; </script> ``` 在这个例子中，当`selectedValue`为""时，下拉框会显示默认的提示信息"请选择"，并且不会显示任何具体的选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值