Javascript 使用下拉列表进行交叉筛选

我有两个下拉列表。 我希望每当在任一下拉列表中进行选择时，都会调用一个名为intersect的函数，该函数依次调用函数loadData和loadData1。我的代码附在这里

<select onchange="intersect()" id="metric" class="wrapper-dropdown">
<option value ="190">190</option>
    <option value ="90">90</option>
    <option value ="100">100</option>
    <option value ="300">300</option>
</select>

<select onchange="intersect()" id="metric1" class="wrapper-dropdown">
<option value ="100">100</option>
    <option value ="200">200</option>
    <option value ="0">0</option>
</select>
<script>

var intersect= function() {

var total_90 = function() {
var data = [
 {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
 {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
 {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
 {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
 {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
 {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
 ];
 var ndx = crossfilter(data);
 var totalDim = ndx.dimension(function(d) { return d.total; });  
 var total_90 =     totalDim.filter(document.getElementById('metric').selectedOptions[0].value); 
return total_90;
  };
var tip_90 = function() {
var data = [
{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];
 var ndx = crossfilter(data);
 var tipDim = ndx.dimension(function(d) { return d.tip; });  
 var tip_90 = tipDim.filter(document.getElementById('metric1').selectedOptions[0].value); 
 return tip_90;
 }
 var result = [];

   for (var i = 0; i < total_90.length; i++){
        if (total_90[i].total == 90 && total_90[i].tip == 0)
        {

            result.push(total_90[i]);
        }
    }

   for (var i = 0; i < tip_90.length; i++){
        if (tip_90[i].total == 90 && tip_90[i].tip == 0)
        {
            result.push(tip_90[i]);
        }
    }
function print_filter(filter){
var f=eval(filter);
if (typeof(f.length) != "undefined") {}else{}
if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","   [\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
    } 
    print_filter("result"); 
     }
    </script>
    </body>

190
90
100
300
100
200
0
var intersect=function（）{
var total_90=函数（）{
风险值数据=[
{日期：“2011-11-14T16:17:54Z”，数量：2个，总数：190个，提示：100个，键入：“tab”}，
{日期：“2011-11-14T16:20:19Z”，数量：2个，总数：190个，提示：100个，键入：“tab”}，
{日期：“2011-11-14T16:28:54Z”，数量：1，总数：300，小费：200，类型：“visa”}，
{日期：“2011-11-14T16:30:43Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T16:48:46Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T16:53:41Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T16:54:06Z”，数量：1，总数：100，小费：0，键入：“现金”}，
{日期：“2011-11-14T16:58:03Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T17:07:21Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T17:22:59Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T17:25:45Z”，数量：2，总数：200，小费：0，类型：“现金”}，
{日期：“2011-11-14T17:29:52Z”，数量：1，总数：200，小费：100，类型：“visa”}
];
var ndx=交叉滤波器（数据）；
var totalDim=ndx.dimension（函数（d）{返回d.total；}）；
var total_90=totalDim.filter（document.getElementById（'metric'）。selectedOptions[0]。value）；
返回总数90；
};
var tip_90=函数（）{
风险值数据=[
{日期：“2011-11-14T16:17:54Z”，数量：2个，总数：190个，提示：100个，键入：“tab”}，
{日期：“2011-11-14T16:20:19Z”，数量：2个，总数：190个，提示：100个，键入：“tab”}，
{日期：“2011-11-14T16:28:54Z”，数量：1，总数：300，小费：200，类型：“visa”}，
{日期：“2011-11-14T16:30:43Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T16:48:46Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T16:53:41Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T16:54:06Z”，数量：1，总数：100，小费：0，键入：“现金”}，
{日期：“2011-11-14T16:58:03Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T17:07:21Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T17:22:59Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T17:25:45Z”，数量：2，总数：200，小费：0，类型：“现金”}，
{日期：“2011-11-14T17:29:52Z”，数量：1，总数：200，小费：100，类型：“visa”}
];
var ndx=交叉滤波器（数据）；
var tipDim=ndx.dimension（函数（d）{return d.tip；}）；
var tip_90=tipDim.filter（document.getElementById（'metric1'）。selectedOptions[0]。value）；
返回提示_90；
}
var结果=[]；
对于（变量i=0；i

---

因此，在任何给定的情况下，如果我在第一个下拉列表中选择“90”，并且在第二个下拉列表中已经选择了“0”，那么我希望在控制台上打印来自两个JSON数组（total=90和tip=0）的所有行。

我不知道这里有什么困难

我希望无论何时在任一下拉列表中进行选择，都会调用一个名为intersect的函数，该函数依次调用函数loadData和loadData1

---

示例：

我不确定您为什么要使用

d3.js

和

crossfilter.js

我认为您的问题没有必要

因为您在问题中只标记了

javascript

。我在此为您提供一个纯JS解决方案，而不是

jquery

var m1 = document.getElementById('metric');

var m2 = document.getElementById('metric1');

m1.onchange = function(){
    //alert(m1.value);
    //alert(m2.value);
    var result = intersection(data, data1, m1.value, m2.value);

    if (result != ""){
        for (var i = 0; i < result.length; i++){
            console.log(result[i]);
        }
    }   
}

m2.onchange = function(){

    var result = intersection(data, data1, m1.value, m2.value);

    if (result != ""){
        for (var i = 0; i < result.length; i++){
            console.log(result[i]);
        }
    }
}

//a is the data
//b is the data1
//v1 is the metric value
//v2 is the matric1 value
function intersection(a, b, v1, v2)
{
    var result = [];
    var c = a.concat(b);
    for (var i = 0; i < c.length; i++){

        if (c[i].total == v1 && c[i].tip == v2)
        {                             
            result.push(c[i]);
        }
    }
    return result;
}

var m1=document.getElementById（'metric'）；
var m2=document.getElementById（'metric1'）；
m1.onchange=函数（）{
//警报（m1.值）；
//警报（m2.值）；
var结果=交叉点（数据、数据1、m1.值、m2.值）；
如果（结果！=“”）{
对于（变量i=0；i

---

尝试选择total=90和tip=0。您将得到您想要的所谓“交叉点”结果。

是的，很好。！！。我在这里也在做同样的事情。但是无论我做什么选择，我都会得到一个空白数组作为输出。如果你可以创建一些代码，请帮助我修复我发布的代码。把链接贴在这里，这样我可以更好地帮助你。但是，这段代码需要包含d3.js和crossfilter.js。我不知道如何在fiddle.netWhy上实现这一点。我需要d3和crossfilter是因为，我必须以图形和表格格式绘制值，当下拉列表中的任何一个值更改时，这些值都应该更改。事实上，还有很多下拉列表需要添加。我对所有这些编码和东西都是新手。

function loadData() {
    alert("loadData reached");
}
function loadData1() {
    alert("loadData1 reached");
}
function intersect() {
    loadData();    
    loadData1();
}

var m1 = document.getElementById('metric');

var m2 = document.getElementById('metric1');

m1.onchange = function(){
    //alert(m1.value);
    //alert(m2.value);
    var result = intersection(data, data1, m1.value, m2.value);

    if (result != ""){
        for (var i = 0; i < result.length; i++){
            console.log(result[i]);
        }
    }   
}

m2.onchange = function(){

    var result = intersection(data, data1, m1.value, m2.value);

    if (result != ""){
        for (var i = 0; i < result.length; i++){
            console.log(result[i]);
        }
    }
}

//a is the data
//b is the data1
//v1 is the metric value
//v2 is the matric1 value
function intersection(a, b, v1, v2)
{
    var result = [];
    var c = a.concat(b);
    for (var i = 0; i < c.length; i++){

        if (c[i].total == v1 && c[i].tip == v2)
        {                             
            result.push(c[i]);
        }
    }
    return result;
}