dc.js multiple select menu with checkboxes - d3.js

Question

I have a dataset which consists of 5 columns -> country, id, value and sector. I was able to create a row chart in dc.js using the value and country, where country is my dimension.
var rowChart = dc.rowChart('#rowChart');
d3.csv('data.csv', function(data){
data.forEach(function(d){
d.country = d.country;
d.id = d.id;
d.value = +d.value;
d.sector = d.sector;
});
var height = 300;
var width = 300;
var ndx = crossfilter(data)
var countryDim = data.dimension(function (d) {
return d.country;
});
var countryGroup = countryDim.group().reduceSum(function (d) {
return d.value
})
rowChart
.width(300)
.height(900)
.margins({top: 10, right: 10, bottom: -1, left: 30})
.dimension(countryDim)
.group(countryGroup)
.colors('#86BC25')
.ordering(function (d) { return -d.value; })
.elasticX(true)
.xAxis();
rowChart
.title(function (d) { return d.value;})
.renderTitleLabel(true)
.titleLabelOffsetX(10);
dc.renderAll();
});
and this is my data in csv
country,id,value,sector
USA,0982,10,high
AUS,0983,9,high
IND,0982,10,high
CHN,0982,8,high
CUB,0986,5,middle
FIN,0987,low
i tried creating a jsfiddle, but does not seem to work, sorry my first time
http://jsfiddle.net/i8rice/2r76bjt7/4/
I want to be able to create two drop down with check boxes. One to filter the row chart by country and another by sector. So if I first filter the sector by 'high' in the drop down menu the row chart will get filtered and the other drop down menu should only show me the 5 'high' countries.
I know this is achievable using dc.selectMenu but I wan that drop down check box style. I was wondering if this is possible with dc.js?
Sorry I am very new to asking questions and in d3.js, dc.js and crossfilter.

Answer 1

Thanks to Gordon the check box within the drop down menu was working. However upon discussing with a few others, they have suggested that the check box, once ticked, is not calling the event handler, so wrote this, which is pretty much the same as the one within dc.js
selectField.on('postRender', function() {
$('#menuselect select').change(function(){
console.log($(this).val())
if ($(this).val() && $(this).val() != "") {
selectField.replaceFilter([$(this).val()]);
} else {
selectField.filterAll();
}
dc.events.trigger(function () {
dc.redrawAll();
});
}).multipleSelect({ placeholder: "Select Country"})
});
And everything worked, well, tested it on local. I don't know of any other ways as I am still new to this.