드롭 다운을 사용하는 교차 필터

Question

두 개의 드롭 다운이 있습니다. 드롭 다운 중 하나에서 선택이 수행 될 때마다 crossect 함수가 호출되어 loadData 및 loadData1.My 코드가 여기에 첨부 된 함수가 호출되기를 원합니다.

<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> 

그래서, 주어진 예에서 나는 '0'벌써 내가 가지고있는 JSON 배열 모두에서 모든 행을 원 아래로 두 번째 드롭에서 선택한 첫 번째 드롭 다운에서 '90'를 선택한 경우 total = 90 및 tip = 0이 콘솔에 인쇄됩니다. 내가 여기 너무 어려운 것을 잘 모릅니다

Answer 1

내가하지 당신이 d3.js 및 crossfilter.js 내가 당신의 질문의 필요성을하지 않는 사용하려는 이유를 확인하십시오.

javascript으로 만 질문을드립니다. 본인은 당신이 그렇게 전화 "교차로"를 얻을 당신이 원하는됩니다 (90) = 총 및 팁 = 0에서 선택을하려고 당신에게 대신 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; 
} 

JSFiddle의 순수한 JS 솔루션을 제공하고있다.

Answer 2

...

내가 선택 드롭 다운 중 하나로 될 때마다,라는 함수가 차례로 함수를 호출하는 호출 교차하는 것을 원하는 loadData 및 loadData1.

function loadData() { 
    alert("loadData reached"); 
} 
function loadData1() { 
    alert("loadData1 reached"); 
} 
function 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> 

: Fiddle