javascript - 如何在 html 页面中处理 jquery？以两个列表为例

Question

这个问题已经有答案了:

JQuery - $ is not defined (36 个回答)

已关闭 5 年前。

我知道最佳实践是将 html 编码拆分为多个较小的文件，但是我正在一个独特的环境中工作，其中所有代码必须位于单个 html 页面中。

我正在尝试让两个列表多重选择功能正常工作，但似乎无法转换我在这里找到的代码，JSfiddle ，转换为我的一页 html 格式。

我尝试了以下方法，但是当 CSS 工作时，脚本却无法工作。

$("#btnLeft").click(function() {
    var selectedItem = $("#rightValues option:selected");
    $("#leftValues").append(selectedItem);
});

$("#btnRight").click(function() {
    var selectedItem = $("#leftValues option:selected");
    $("#rightValues").append(selectedItem);
});

$("#rightValues").change(function() {
    var selectedItem = $("#rightValues option:selected");
    $("#txtRight").val(selectedItem.text());
});

SELECT,
INPUT[type="text"] {
    width: 160px;
    box-sizing: border-box;
}

SECTION {
    padding: 8px;
    background-color: #f0f0f0;
    overflow: auto;
}

SECTION>DIV {
    float: left;
    padding: 4px;
}

SECTION>DIV+DIV {
    width: 40px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div>
    <select id="leftValues" size="5" multiple></select>
</div>
<div>
    <input type="button" id="btnLeft" value="&lt;&lt;" />
    <input type="button" id="btnRight" value="&gt;&gt;" />
</div>
<div>
    <select id="rightValues" size="4" multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <div>
        <input type="text" id="txtRight" />
    </div>
</div>
</section>

Answer 1

到目前为止，代码对我来说看起来不错，但你没有加载 jquery!但是您需要包含 jQuery javscript 文件。例如。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

将这个小代码片段粘贴到第一个 <script> 之前标签，它应该像 JSfiddle 版本中一样工作。