Question

当使用jquery选择列表（来自：https://code.google.com/p/jquery-ui-picklist/）时，我只得到一个列表而不是2个（左和右）。有什么想法吗？

复制粘贴的全部内容

HTML code：

<html>
<head>
    <title>TestSite</title>
    <link href="./css/test.css"  rel="stylesheet">
</head>

<body>
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/test.js"></script>

    <div>
        <select name="basic" id="basic" multiple="multiple">
            <option value="1">Option 1</option>
            <option value="2" selected="selected">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4" selected="selected">Option 4</option>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
        </select>
    </div>

</body>
</html>

JS代码：

$(document).ready(function() {
$("#basic").picklist();
});

CSS代码：

 body { margin: 0.5em; }

.pickList_sourceListContainer, .pickList_controlsContainer, `.pickList_targetListContainer { float: left; margin: 0.25em; }`
.pickList_controlsContainer { text-align: center; }
.pickList_controlsContainer button { display: block; width: 100%; text-align: center; }
.pickList_list { list-style-type: none; margin: 0; padding: 0; float: left; width: 150px; height: 75px; border: 1px inset #eee; overflow-y: auto; cursor: default; }
.pickList_selectedListItem { background-color: #a3c8f5; }
.pickList_listLabel { font-size: 0.9em; font-weight: bold; text-align: center; }
.pickList_clear { clear: both; }

Answer 1

在您的代码中，更改

<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>

到

<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>

原因：您应该在选择列表之前包含引用jquery UI小部件。 （检查小提琴中的顺序）

排序很重要，因为选择列表引用了前者（jquery UI小部件库）的功能 - Reference 。

jQuery选项列表：只显示一个

1 个答案: