您可以使用多选元素（默认隐藏）并通过单击箭头来切换可见性？

http://jsfiddle.net/FLQe8/2/

jQuery

$("body").on("click", ".arrow-down", function(){
    $("#listcc").toggle();
})

HTML

<ul id="city-list">
    <li>
        <form action="#">
            <select style="display:none" multiple id="listcc" name="escities">
                <option>Aspen</option>
                <option>Tokyo</option>
                <option>Cannes</option>
                <option>Capetown</option>
                <option>Courchevel</option>
            </select>
        </form>
    </li>
    <li>
        <div class="arrow-down"></div>
    </li>
</ul>

试试这个：- http://jsfiddle.net/aiioo7/acQZ7/

JS：-

var state = false;
jQuery(function ($) {
    $(".arrow-down").on("click", function () {
        state = !state;
        $("#listcc").prop("size", state ? $("option").length : 1);
    });
});

HTML:-

<ul id="city-list">
    <li>
        <form action="#">
            <select id="listcc" name="escities">
                <option>Aspen</option>
                <option>Tokyo</option>
                <option>Cannes</option>
                <option>Capetown</option>
                <option>Courchevel</option>
            </select>
        </form>
    </li>
    <li>
        <div class="arrow-down"></div>
    </li>
</ul>

已编辑

$(function () {
    $("#ddComOS").jqDropDown({
        toggleBtnName: "arrow-down"
    });
});