首页 / 技术问答 / Javascript问答列表 / 问答详情

JavaScript：使用 onchange 使用下拉菜单过滤数据

我的目标是根据用户在下拉菜单中的 Select 来过滤数据.

SET UP个

我有一个名为employees的对象array.首先，我按salary属性排序，然后使用另一个函数manipulateData()，我按role属性(用户通过下拉菜单 Select )进行筛选.

一百零二

以下是我的代码:

JavaScript:个

let employees = [
    {
        id : 1,
        name : 'John Smith',
        role : 'Sales',
        salary : 100000
    },

    {
        id : 2,
        name : 'Mary Jones',
        role : 'Finance',
        salary : 78000,
    },

    {
        id : 3,
        name : 'Philip Lee',
        role : 'Finance',
        salary : 160000,
    },

    {
        id : 4,
        name : 'Susan Williams',
        role : 'Sales',
        salary : 225000,
    },

    {
        id : 5,
        name : 'Jason Alexander',
        role : 'Finance',
        salary : 90000,
    },

     {
        id : 6,
        name : 'Derek Sanders',
        role : 'Sales',
        salary : 140000,
    }

]

//#

function filterData() {
    let allData = employees;

    let selectBox = document.getElementById("employee-role");
    let selectedValue = selectBox.options[selectBox.selectedIndex].value;

    // SORT SALARIES DESCENDING
    allData.sort(function (a, b) {
        return b.salary - a.salary;
    })

    console.log('Sorted Data', allData);

    // *** Here is where I'd like to invoke the dataManipulation() function to filter on only the user-selected roles

    // LIMIT TO ONLY 2 RECORDS
    let filteredData = allData.filter( (value, index) => {
        return (index < 2);
    });


    // RENDER THE CHART
    //renderChart(filteredData);
}

function manipulateData(filteredData) {
    return filteredData.filter(e => e.role === selectedValue)
}

HTML:个

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <title>Example</title>

    </head>
    <body>

    <div class="container-fluid">

        <!-- header -->
        <div class="row justify-content-center">
            <div class="align-self-center">
                <h1>Example</h1>
            </div>
        </div>

        <!-- drop down menu -->
        <div class="row justify-content-center">
            <div class="align-self-center">
                <div class="user-control">
                    <div class="form-group">
                        <select id="employee-role" class="form-control" onchange="manipulateData()">
                            <option value="All">All Roles</option>
                            <option value="Sales">Sales</option>
                            <option value="Finance">Finance</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>


        <!-- container of bar chart -->
        <div id="chart-area"></div>

    </div>
    </body>
</html>

Question:在我将数据集的大小减少到2条记录之前，如何合并manipulateData()函数以仅获取用户通过下拉菜单 Select 的role条记录？

谢谢！(这里是JavaScript新手)

推荐答案

您可以使用您的数据集直接拨打manipulateData(allData, selectedValue).在此之后，您可以删除您的HTML中的onchange="manipulateData()".

let employees = [{
    id: 1,
    name: 'John Smith',
    role: 'Sales',
    salary: 100000
  },
  {
    id: 2,
    name: 'Mary Jones',
    role: 'Finance',
    salary: 78000,
  },
  {
    id: 3,
    name: 'Philip Lee',
    role: 'Finance',
    salary: 160000,
  },
  {
    id: 4,
    name: 'Susan Williams',
    role: 'Sales',
    salary: 225000,
  },
  {
    id: 5,
    name: 'Jason Alexander',
    role: 'Finance',
    salary: 90000,
  },
  {
    id: 6,
    name: 'Derek Sanders',
    role: 'Sales',
    salary: 140000,
  }
]

function filterData() {
  let allData = employees;

  let selectBox = document.getElementById("employee-role");
  let selectedValue = selectBox.options[selectBox.selectedIndex].value;

  // SORT SALARIES DESCENDING
  allData.sort(function(a, b) {
    return b.salary - a.salary;
  })

  //call `manipulateData` and pass `allData` to the param for filtering
  let filteredData = manipulateData(allData, selectedValue)

  // LIMIT TO ONLY 2 RECORDS
  filteredData = filteredData.filter((value, index) => {
    return (index < 2);
  });

  console.log(filteredData)
  // RENDER THE CHART
  //renderChart(filteredData);
}

function manipulateData(filteredData, selectedValue) {
  if(selectedValue === "All") {
    return filteredData;//skip this logic, if the value is `All`
  }

  return filteredData.filter(e => e.role === selectedValue)
}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <title>Example</title>

    </head>
    <body>

    <div class="container-fluid">

        <!-- header -->
        <div class="row justify-content-center">
            <div class="align-self-center">
                <h1>Example</h1>
            </div>
        </div>

        <!-- drop down menu -->
        <div class="row justify-content-center">
            <div class="align-self-center">
                <div class="user-control">
                    <div class="form-group">
                        <select id="employee-role" class="form-control">
                            <option value="All">All Roles</option>
                            <option value="Sales">Sales</option>
                            <option value="Finance">Finance</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

<button onclick="filterData()">
Check filtered data
</button>

        <!-- container of bar chart -->
        <div id="chart-area"></div>

    </div>
    </body>
</html>

Note that I added 100 for the demo purpose. You can remove it and fill in other elements at your needs.

Javascript相关问答推荐

导入图像与内联包含它们NextJS

输入有关HTML复选框的已判断属性的信息

即使设置了父级的最大高度，固定位置的分区内容也不会滚动？

如何使用JavaScript向html元素添加样式

如果没有尾随斜线，托管在收件箱中的React/Vite将无法工作

如何使用JavaScript用等效的功能性HTML替换标记URL格式？

传递一个大对象以在Express布局中呈现

jQuery提交按钮重新加载页面，即使在WordPress中使用preventDefault()

通过嵌套模型对象进行Mongoose搜索

如何在Obsidian dataview中创建进度条

在react JS中映射数组对象的嵌套数据

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

如何在Svelte中从一个codec函数中调用error()？

当用户点击保存按钮时，如何实现任务的更改？

使用auth.js保护API路由的Next.JS，FETCH()不起作用

回溯替代方式

如何使用画布在另一个内部绘制一个较小但相同的形状，同时保持恒定的边界厚度？

如果NetSuite中为空，则限制筛选

如何让SVG图标在被点击和访问后改变 colored颜色 ，并在被访问后取消点击时恢复到原来的 colored颜色 ？

我为什么要使用回调而不是等待？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630