列表实现select下拉多选筛选功能呢

迅睿框架 更新 2025-11-04 08:08:26 小萌娃

微信截图_20220802095311

官网这个筛选复选字段 能不能改成 select 下拉多选完之后再加个搜索按钮呢,有大神指导下么。。

方案

  • 优速开发工作室 #1 · 2022-08-02 10:02:29
    道理都一样,只是改变了一种模板展示方式,用js就可以搞定了,可以加我QQ做
  • 小黄人 18html #2 · 2022-08-02 10:03:11
    百度找对应的样式就可以实现了
  • 小黄人 18html #3 · 2022-08-02 11:22:34
    满意答案
    官方默认模板改造
                                    <form action="/index.php" method="get">
                                        <input type="hidden" name="s" value="demo">
                                        <input type="hidden" name="c" value="search">
                                        <input type="text" placeholder="搜索内容..." name="keyword">
                                        <div class="form-group row" id="duoxuan">
                                            <label class="col-md-2 control-label">复选字段-多条件</label>
                                            <div class="col-md-9">
                                                <label>
                                                    <a class="label {if !$params.fuxuankuang}label-success{else}label-default{/if}" href="{Router::search_url($params, 'fuxuankuang', NULL)}">不限</a>
                                                </label>
                                                <!--调用单选字段数据方法-->
                                                {php $field = dr_field_options($ci->module['field']['fuxuankuang']['id']);}
                                                {loop $field $value $name}
                                                <label>
                                                    <span class="label {if dr_is_double_search($params.fuxuankuang, $value)}label-success{else}label-default{/if}" data-value="{$value}">{$name}</span>
                                                </label>
                                                {/loop}
                                            </div>
                                        </div>
                                        <input id="duoxuan_value" name="fuxuankuang" value="{$params.fuxuankuang}" type="hidden">
                                        <script type="text/javascript">
                                        $('#duoxuan span').on('click', function() {
                                            var val = $(this).data('value');
    
                                            //点击,添加样式
                                            if ($('#duoxuan a').hasClass('label-success')) {
                                                $('#duoxuan a').removeClass("label-success").addClass("label-default");
                                            }
                                            if ($(this).hasClass('label-success')) {
                                                $(this).removeClass("label-success").addClass("label-default");
                                            } else {
                                                $(this).removeClass("label-default").addClass("label-success");
                                            }
                                            //点击,添加样式
    
                                            //历遍,组合多选值
                                            var id = [];
                                            $("#duoxuan span").each(function() {
                                                if ($(this).hasClass('label-success')) {
                                                    id.push($(this).data('value'));
                                                }
                                                var Newstr = id.join("|");
                                                $('#duoxuan_value').val(Newstr);
                                            });
                                            //历遍,组合多选值
    
                                        })
                                        </script>
                                        <input type="submit" value="提交搜索" />
                                    </form>
  • 小萌娃 #4 · 2025-11-04 08:08:26
    @小黄人 18html:设置结贴下

迅睿系统漏洞

GeoSeo收录宝
GeoSeo收录宝(2026-09-01)
升级 ai智能发布功能 升级 支持8国语言后端设置和前端输出功能 ...
Word发布批量上传
Word发布批量上传(2026-08-31)
版本覆盖问题重发
多语言翻译Seolang
多语言翻译Seolang(2026-08-31)
新增 LLM 大模型对话翻译模块 配置层强类型化重构 URL 模...
自定义存储
自定义存储(2026-08-30)
同步服务器端通用版实现,统一管理端、CMS 端和浏览器直传的提示与错...
GeoSeo工具箱
GeoSeo工具箱(2026-08-29)
新增 bing推送 新增 IndexNow推送 新增 baidu...
外贸多语言建站
外贸多语言建站(2026-08-27)
新增阿里云专业版入口 新增阿里云自动识别字符格式
Querylist渐进式采集
Querylist渐进式采集(2026-08-26)
增加范围截取规则
实时任务
实时任务(2026-08-26)
补充并整理完整使用说明、历史版本更新日志,统一帮助页样式。