implement multiple select, but it was too ugly, next try bootstrap

src/managers/selectorManager.ts

@@ -60,52 +60,56 @@ abstract class Selector implements ISelector{
         this.manager=manager;
         this.createView();
     }
-    protected view:Selection<HTMLElement>;
     protected abstract createView();
-    public dispose(){
-        this.view?.remove();
-    }
+    public abstract dispose();
     protected readonly manager:ISelectorManager;
     public abstract update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn);
 }
 class DropDownSelector extends Selector{
+    private dropDown:Selection<HTMLSelectElement>;
     protected createView() {
         console.debug('dropDownViewManager','createView start');
-        this.view=this.manager.selectorContainer.append("select").classed("dropDown-selector",true).classed("selector",true);
+        this.dropDown=this.manager.selectorContainer.append("select").classed("dropDown-selector",true).classed("selector",true).attr("multiple",true);
         console.debug('dropDownViewManager','createView end');
     }
+    public dispose(){
+        this.dropDown.remove();
+    }
     public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
         console.debug('dropDownViewManager','update start');
-        let appending=this.view.selectAll("option").data(categories.values);
-        appending.enter().append("option").text(function(d){return d.toString();});
-        appending.exit().remove();
-        console.debug("appending:",appending);
+        let options=this.dropDown.selectAll("option").data(categories.values,function(d){return d.toString();});//map data
+        options.enter().append("option").text(function(d){return d.toString();});//add
+        options.exit().remove();//delete
+        console.debug("dropDown:",this.dropDown);
         let filterManager:IFilterManager=this.manager.filterManager;
-        (<Selection<HTMLSelectElement>>this.view).on("input change",function(){
+        this.dropDown.on("input change",function(){
             console.debug('DropDownSelector:',"input change");
             console.debug('this',this);
             console.debug('filterManager:',filterManager);
-            let selection:string[]=[];
+            let selectedValues:string[]=[];
             for(let i=0;i<this.selectedOptions.length;i++){
                 let option=this.selectedOptions.item(i);
                 if(option.selected){
                     console.debug("option selected",option);
                     console.debug('option.text:',option.text);
-                    selection.push(option.text);
+                    selectedValues.push(option.text);
                 }
             }
-            if(selection.length==0){
-                
+            if(selectedValues.length==0){
             }else{
-                console.debug("selection.length",selection.length);
-                filterManager.filterStringField(selection);
+                console.debug("selection.length",selectedValues.length);
+                filterManager.filterStringField(selectedValues);
             }
             console.debug("this",this.selectedOptions);
         });
+
         console.debug('dropDownViewManager','update end');
     }
 }
 class ListSelector extends Selector{
+    public dispose() {
+        throw new Error("Method not implemented.");
+    }
     protected createView() {
         throw new Error("Method not implemented.");
     }
@@ -115,6 +119,9 @@ class ListSelector extends Selector{
     }
 }
 class CalendarSelector extends Selector{
+    public dispose() {
+        throw new Error("Method not implemented.");
+    }
     protected createView() {
         throw new Error("Method not implemented.");
     }

src/visual/visual.ts

@@ -71,7 +71,7 @@ export class Visual implements IVisual {
                     x: mouseEvent.clientX,
                     y: mouseEvent.clientY
                 });
-                mouseEvent.preventDefault();
+                //mouseEvent.preventDefault();
             });
             let headerContainer=container.append("div").classed("header-container",true);
             let selectorContainer=container.append("div").classed("selector-container",true);