选择下拉列表项未显示

Question

我的代码需要一些帮助。我在选择选项中选择项目时遇到了问题。我正在使用dropkick选择选项，当我尝试单击选择选项的向下箭头按钮时，它不会下拉该项目。代码有问题。

当我尝试这样做时：

<form class="list-dropdown" action="" method="post" name="listSelect">

    <input type="hidden" name="data[landing_page]" value="/broadcasts">
    <div class="dk-select " id="dk0-datalistactivate"><div class="dk-selected " tabindex="0" id="dk0-combobox" aria-live="assertive" aria-owns="dk0-listbox" role="combobox">dubc_traffic</div><ul class="dk-select-options" id="dk0-listbox" role="listbox" aria-expanded="false"><li class="dk-option  dk-option-selected" data-value="" text="dubc_traffic" role="option" aria-selected="true" id="dk0-listSelectionActiveOption">dubc_traffic</li></ul></div><select name="data[List][activate]" id="datalistactivate" data-dkcacheid="0">

<option selected="selected" id="listSelectionActiveOption" value="">dubc_traffic</option>

<option selected="selected" id="listSelectionActiveOption" value="">dubc_traffic 2</option>
loading lists …

    </select>
    <div class="clear"></div>
</form>

它不起作用，但是当我尝试时它将起作用：

<select class="dk-select select-options select-options" id="dk0-datalistactivate">
    <option>dubc_traffic ass</option>
</select>

代码如下：

<style type="text/css">

.lists-dropdown {
    color: #343434;
    float: left;
    display: none;
    font-size: 13px;
    height: 35px;
    line-height: 12px;
    margin-right: 10px;
    padding-top: 20px;
    position: relative;
}

.lists-dropdown label {
    color: white;
    font-size: 13px;
    font-weight: 600;
    padding: 8px;
    display: inline-block;
    vertical-align: top;
}

.lists-dropdown form {
    left: 5px;
    display: inline-block;
}



.topnav .dk-select, .topnav .dk-select-options {
    width: 180px;
}

.dk-select, .dk-select-multi {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 2em;
    cursor: pointer;
}
.dk-select, .dk-select *, .dk-select *:before, .dk-select *:after, .dk-select-multi, .dk-select-multi *, .dk-select-multi *:before, .dk-select-multi *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.topnav .dk-selected {
    height: auto;
}
.dk-selected {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background-color: white;
    border-radius: 4px;
    border: 1px solid #ababab;
    overflow: hidden;
    padding: 0 2em 0 .5em;
    position: relative;
    white-space: nowrap;
}
.dk-select, .dk-select *, .dk-select *:before, .dk-select *:after, .dk-select-multi, .dk-select-multi *, .dk-select-multi *:before, .dk-select-multi *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.dk-selected:before {
    top: 50%;
    border: solid transparent;
    border-width: .25em .25em 0;
    border-top-color: #ababab;
    margin: -0.125em .5em 0 0;
}

.dk-selected:before, .dk-selected:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
}

.dk-selected:after {
    top: 0;
    height: 100%;
    border-left: 1px solid #ababab;
    margin: 0 1.5em 0 0;
}

.dk-selected:before, .dk-selected:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
}

.dk-select .dk-select-options {
    position: absolute;
    display: none;
    left: 0;
}
.topnav .dk-select, .topnav .dk-select-options {
    width: 180px;
}
.dk-select-options {
    background-color: white;
    border-radius: 4px;
    border: 1px solid #ababab;
    list-style: none;
    margin: 0;
    max-height: 18.5em;
    overflow-y: auto;
    padding: 0;
    z-index: 1000;
}

.dk-option {
    line-height: 1.5;
    padding: 6px 8px;
    word-wrap: break-word;
}

.dk-option-selected {
    background-color: #00adef;
    color: #fff;
}

select[data-dkcacheid] {
    display: none;
}

.lists-dropdown select {
    font-size: 16px;
}
form .searchinputbox, form .searchbox, form select {
    background-color: #fff;
    border: 1px solid #dbdcde;
    color: #505e67;
    height: 30px;
}

form .searchinputbox option, form .searchbox option, form select option {
    color: #505e67;
}

user agent stylesheet
option {
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
}
</style>

<form class="list-dropdown" action="" method="post" name="listSelect">

    <input type="hidden" name="data[landing_page]" value="/broadcasts">
    <div class="dk-select " id="dk0-datalistactivate"><div class="dk-selected " tabindex="0" id="dk0-combobox" aria-live="assertive" aria-owns="dk0-listbox" role="combobox">dubc_traffic</div><ul class="dk-select-options" id="dk0-listbox" role="listbox" aria-expanded="false"><li class="dk-option  dk-option-selected" data-value="" text="dubc_traffic" role="option" aria-selected="true" id="dk0-listSelectionActiveOption">dubc_traffic</li></ul></div><select name="data[List][activate]" id="datalistactivate" data-dkcacheid="0">

<option selected="selected" id="listSelectionActiveOption" value="">dubc_traffic</option>

<option selected="selected" id="listSelectionActiveOption" value="">dubc_traffic 2</option>
loading lists …

    </select>
    <div class="clear"></div>
    <input type="hidden" name="sess_token" value="388289602566325fdeb6bce2a708c6d46ca2ac1c">
</form>

Jsfiddle：http://jsfiddle.net/rynawLx2/

我了解我没有添加多个项目，但是单击它不会下拉这些项目。我想使用上方该链接中第一个选项下方的第二个选择选项，因为我喜欢向下箭头旁边的线条所附带的皮肤。

当我单击下拉菜单项或向下箭头时，能否请您帮助我获取选择选项以使用下拉菜单项？

我想使用该选择选项添加多个项目。

谢谢。