前端 多个筛选框


v-for 在外层控制,且不能在最外层

<template>
    <div class="select-form">
        <el-form :inline="true" class="demo-form-inline">
            <div class="cov_select" v-for="(item,index) in selectData" :key="index" >
                <div class="item">
                    {
  {item.des}}
                    <el-select
                        v-model="item.name"
                        :placeholder="item.ph"
                        size="medium"
                        clearable
                        @change="valueSelect(index,$event)"
                        value-key="id">
                        <el-option
                            v-for="it in item.options"
                            :key="it.id"
                     
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个示例代码,其中包含了多个筛选的组合筛选功能。请根据实际需求进行修改和调整。 HTML代码: ``` <div> <label for="category">Category:</label> <select id="category"> <option value="">All</option> <option value="clothing">Clothing</option> <option value="shoes">Shoes</option> <option value="accessories">Accessories</option> </select> </div> <div> <label for="color">Color:</label> <select id="color"> <option value="">All</option> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> </select> </div> <div> <label for="size">Size:</label> <select id="size"> <option value="">All</option> <option value="small">Small</option> <option value="medium">Medium</option> <option value="large">Large</option> </select> </div> <button id="filter-btn">Filter</button> <div id="results"> <!-- Filtered results will be displayed here --> </div> ``` JavaScript代码: ``` const products = [ { name: 'Red T-shirt', category: 'clothing', color: 'red', size: 'medium' }, { name: 'Blue Shoes', category: 'shoes', color: 'blue', size: 'large' }, { name: 'Green Hat', category: 'accessories', color: 'green', size: 'small' }, { name: 'Red Dress', category: 'clothing', color: 'red', size: 'large' }, { name: 'Blue Scarf', category: 'accessories', color: 'blue', size: 'medium' }, { name: 'Green Jacket', category: 'clothing', color: 'green', size: 'large' } ]; const filterBtn = document.getElementById('filter-btn'); const resultsEl = document.getElementById('results'); filterBtn.addEventListener('click', () => { const category = document.getElementById('category').value; const color = document.getElementById('color').value; const size = document.getElementById('size').value; let filteredProducts = products; if (category) { filteredProducts = filteredProducts.filter(product => product.category === category); } if (color) { filteredProducts = filteredProducts.filter(product => product.color === color); } if (size) { filteredProducts = filteredProducts.filter(product => product.size === size); } displayResults(filteredProducts); }); function displayResults(products) { resultsEl.innerHTML = ''; if (products.length === 0) { resultsEl.innerHTML = 'No results found.'; return; } products.forEach(product => { const productEl = document.createElement('div'); productEl.innerHTML = product.name; resultsEl.appendChild(productEl); }); } ``` 在以上代码中,我们定义了一个`products`数组,其中包含了一些商品信息。在HTML代码中,我们定义了三个下拉,用户可以通过选择不同的选项来筛选出符合条件的商品。当用户点击“Filter”按钮时,JavaScript代码会根据用户选择的选项,对`products`数组进行筛选,并将筛选结果显示在页面上。 请注意,以上代码仅作为示例,实际情况下可能需要根据实际需求进行修改和调整。例如,可以添加更多的筛选条件,或者将筛选结果以不同的方式展示在页面上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值