将<select>列表绑定到css类</select>

Question

我有一个<select>列表和一个箭头css类，如下所示：

<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>

class="arrow-down"只是用css构建的小箭头。

CSS代码：

.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #c2a54d;
    margin: 0 0 0 0;
}

我希望用户按箭头打开<select>列表。关于如何将这些绑定在一起的任何想法？

Answer 1

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

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>

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/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"
    });
});