how to add dropdown checkbox list in to the search api(facet api) display widget?
What you need to do is: 


In your search api configuration (screen you attached), select "MultiSelect element".
Install an appropriate dropdown widget, the jQuery UI MultiSelect Widget is probably the best option for what you need.
Configure the jQuery UI MultiSelect Widget to target your Search API's MultiSelect element: 


First, figure out what the id or class of that MultiSelect field is. You can use your browser's "Inspect Element" function to figure that out while viewing the standard Search API Facets on a search page.
Once you have the right class or id, go to the configuration page of the jQuery UI MultiSelect Widget (URL is sth like your.drupal.localhost/admin/config/user-interface/jquery_ui_multiselect_widget) and add it in the "JQuery subselector" text box. 



That's it, now you should have a the jQuery MultiSelect Widget rendering your standard Search API Facets MultiSelect field.

Here is a screenshot of the end result (search api block facet rendered as a jQuery UI MultiSelect Widget): 



Let me know how this goes!

Appendix A: jQuery UI MultiSelect Widget Configuration



Appendix B: jQuery Update Configuration