Custom Select Box : Style Box, scroll, and multiline

[davelf]

I'm looking for a script for select box.
I make the new design like in the screenshot, i already try to find jquery, javascript, css3 to cover what my design need, but can't find one.


I try to make one with the script i find but, still it's not perfect like i hope.
http://davejob.com/ex/selectbox/

So please if you have any suggestion just post it here.
Thank you so much.

[jscheuer1]

OK, let's start with the easy/obvious stuff and see how that goes.

Those don't look like valid option tags to me. Is that how the demo instructs you to make them? Even if it is, one could try using the opening and closing tag:

        <select name="speedA" id="speedA">
        	<option selected="selected">Select a Patient</option>
            <option>Angelina Jolie - Jl. Biduan No. 10, Jakarta - HP: 0812-3456789</option>
            <option>Jeniffer Aniston - Jl. Biduan No. 10, Jakarta - HP: 0812-3456789</option>
            <option>Kate Hudson - Jl. Biduan No. 10, Jakarta - HP: 0812-3456789</option>
        </select>

With or without that change, it looks like the most glaring deviation from what you are after is a missing second line break for each option. Even though it's not valid (option tags are not allowed children other than text nodes), you could try a br tag:

        <select name="speedA" id="speedA">
        	<option selected="selected" />Select a Patient
            <option />Angelina Jolie - Jl. Biduan No. 10, Jakarta<br>HP: 0812-3456789
            <option />Jeniffer Aniston - Jl. Biduan No. 10, Jakarta<br>HP: 0812-3456789
            <option />Kate Hudson - Jl. Biduan No. 10, Jakarta<br>HP: 0812-3456789
        </select>

Especially because these option tags are replaced by span tags after the script runs, that has a chance of working. If not, we could add our own code to replace - with <br> after the main custom select code ran. This BTW is what a single option looks like to the browser once the script code transforms it:

<li role="presentation" class="ui-selectmenu-item-selected"><a href="#nogo" tabindex="-1" role="option" aria-selected="true" id="ui-selectmenu-item-0">
<span class="ui-selectmenu-item-header">Angelina Jolie</span>
<span class="ui-selectmenu-item-content">Jl. Biduan No. 10, Jakarta - HP: 0812-3456789
            </span></a></li>