We Keep Coding

Multi select Dropdown with filter

I have a requirement where in I have to create a multi select drop down where the elements can be searchable and the count of selected items should be displayed upon selection.
I have found the partial part of the requirements at this link
But not sure how to make the drop down collapsible and expandable
Wire frame image as below
Has anyone come across and worked on such requirements?

Well it depends also a bit if you are using plain Javascript or if you are also using a Framework like Angular/vue/ember or so
here is one component that looks like it makes what you want
http://selectize.github.io/selectize.js/

Recursive Drop Down Image Selection?

I'm trying to create a product page layout that allows a customization of a product. Basically, a series of drop downs with each successive drop down populated with options based on what has been selected so far. So like this:
Drop down 1: Product Variant (user selects productvariationb, drop down 2 then is populated with options for productvariationb).
Drop down 2: Product color (user selected productvariationb in drop down 1, now that they select "brown" in drop down 2 the image should change to a brown version of productvariation b).
And so on, with the image changing (and options populating) each time according to what has been selected.
Can I do this with JS and does anyone know of a script similar that I can edit, or what functions of JS I need to look into to accomplish this?

Here I made you this : http://jsfiddle.net/moeishaa/H9fF2/
It is working with jQuery. Play with it and let me know if this helped :-)
I know it looks very static but you can render the drop-down on page load and populate the options object as well. I am sure you can find plug in and add-ons. This is a very short amount of code and can be customized.

I think the best resource for example code would be looking at some JavaScript or JQuery examples on creating expandable menus (more specifically ones that mimic folder structures). They usually operate by decorating an unordered list.
You could create a static unordered list and have the image change based on what item you are hovering over. Alternatively, you could use some AJAX to dynamically populate additional parts of the list as you hover over different levels. Both of those would most likely be easily accomplished with JQuery. Here's a page with some menu examples that might give you some ideas:
JQuery Navigation Menus

How to make a "hybrid" HTML drop-down list that can work as a text box as well?

For my website, I need to have a way for users to enter their cities.
I'd like to use 2 drop-down list for that: a "State" and a "City" drop-down lists. The choices in the "City" list would depend on what "State' has been selected.
However, there bound to be cases where a user's "City" is not in the drop-down list. To handle those cases, I want the "City" input to be a "hybrid": while users could select a choice from a drop-down list, they could also use the input as a textbox and simply type out their city name.
An example of what I have in mind is Google Map. Enter any address into Google Map. Then click on "Directions" on the left panel. Then click the "By public transit" icon (2nd icon from left). The right-most drop-down box is what I'm talking about. You could select choices like "1:00pm", "1:30pm", "2:00pm" etc from a drop-down list. But you could also just type out a time like "1:23pm" inside the box.
How do I do something like that? Is there any javascript library/framework that does that? I'm currently using jQuery.

There are lots of JavaScript examples of this, using JQuery, or native JS. They're typically called combo boxes - for their ability to select from the drop-down or accept typed entry - most of them including settings to enable free-form entry vs forcing selection from the list only. I don't have any experience with a specific type, so I won't make a recommendation, but if you Google "javascript combo box" that'll get you started in the right direction :)

If you view source on the GMaps directions page that you are referring to, you can see how they do it; the "dropdown" button is really just an image. When a selection is made from the dropdown, the value is put into the textbox.

Some solutions I've found for whom it may concern:
Using select2 library and Tagging .
Selectize is the hybrid of a textbox and box.
Using Vue frawework see vue-multiselect and tagging support.
So probably you can consider "select taggging support" a good combination of words to search at Google.

Style / Replace a select box using prototype / scriptactulous

I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png

I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.

For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.

Auto populate combobox

IN my case i want to implement multi select auto complete combobox using html,javascript.
Is there any body who knows how to implement it.
Which will be similar to text field shown in stackoverflow while adding multipal tags to any question.

If you are talking about multiple drop down boxes that are linked, so that the selection in the first drop down menu determines the possibilities in the next, then the ASP.NET Toolkit has a nice cascading drop down sample. This will only, of course, come in handy if you are programming in ASP.NET. I would not recommend trying to reverse engineer the solution.

What do you mean by auto populate?
If you want to populate the drop down box dynamically you can just use a normal HTML Select tag and use Ajax to fetch the list of values to be shown in the drop down