先说说我咋想到要加下拉框的

说实话， 我这人技术不咋好，平时只会改改后台的颜色，哪天老板叫我在商品筛选那儿弄个“省市区”下拉，我就慌了。 于是我翻了翻老旧的论坛贴子，找到了几段代码，硬是凑合着往里塞。

一步一步把坑填上

1️⃣ 打开你们的模板文件， 一般是 goods_list. 我们一起... htm 或者 goods_info.htm随便找一个离得近的。

2️⃣ 找到想放下拉框的位置， 我一般是靠页面左边的表单里随手往后面加：，容我插一句...

    请选择
    {$attr.attr_value}

累并充实着。 这段代码本来是模板语法，我直接把它搬过去，忘了把 {foreach} 前面的惊叹号和注释符号删掉。后来啊页面直接报错，你懂得。

把错误搞定

我把上面的注释改成了普通的 HTML 注释：

{$attr.attr_value}

然后再打开后台，把对应的属性都配好。这里有个小技巧：属性值一定要写全，否则前端显示会出现乱码，嚯...。

加点儿JS， 让它能搜索

绝了... 很多人说下拉框太丑，还不支持搜索，于是我就装了一个叫 Chosen 的插件。下面这段代码直接粘进去就行：

注意：ECShop 默认不兼容 jQuery， 你得先去后台的 common.js 里把 jQuery 引进去，不然页面会报错“$ is not defined”。我就是这么折腾出来的，PTSD了...。

CSS 随意调点颜色

下面这段 CSS 我随手写的， 效果不保证：

#myfilter{
    width:220px;
    padding:4px;
    background:#f9f9f9;
    border:1px solid #aaa;
}

测试一下

YYDS！ 保存完文件，上线后打开前台页面用 Chrome、IE、Safari 随便点开看看。 如果出现空白或者选项不对，那可能是后台没有正确配置属性，或者数据库里没有对应的数据。

常见报错：

• "Undefined index: filter_attr": 模板变量没传过去。
• "Syntax error": 注释写错了。
• "$ is not defined": jQuery 没加载成功。

遇到问题怎么办？

挺好。 - 看看浏览器控制台， 有没有红字； - 把代码全部复制粘贴到记事本，再慢慢删掉多余的符号； - 去论坛搜 “ecshop 下拉 框 搜索”，大概率有人已经吐槽过你现在遇到的问题。

再说说再说几句废话

其实在 ECShop 加下拉框根本没啥难度， 只要你敢动模板、敢改 PHP、敢装插件。 如果你跟我一样技术菜， 只会 copy-paste，那就多 copy‑paste 几遍，把出错信息记下来然后发帖求助。

温馨提示：

• 修改前一定要备份整个项目，否则回不来。
• #region 这种 ID 名称最好不要和系统自带冲突。
• #region { width:200px } 这种 CSS 写法必须放在 HEAD 里或者单独文件，不然会被压缩工具删掉。
• 记得清理缓存，不然改了也看不到效果。

P.S. 小彩蛋 🎉

如果你真的想让下拉框有模糊搜索功能， 还可以尝试下面这个简陋的 JS：

document.getElementById.addEventListener{
    var txt = e.target.value.toLowerCase;
    var opts = this.options;
    for{
        if.indexOf!==-1){
            opts.style.display='';
        }else{
            opts.style.display='none';
        }
    }
});

破防了... 本文纯属个人经验分享，如有侵权请联系删除。版权归原作者所有，转载请注明出处。