我知道,最佳实践是将您的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="<<" />
<input type="button" id="btnRight" value=">>" />
</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>
到目前为止,代码对我来说看起来不错,但是您没有加载jQuery!但是,您需要包括jQuery Javscript文件。例如。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
在第一个<script>
标签之前粘贴此小代码段,它应该像JSFIDDLE版本一样工作。
尝试通过在 <head>
<script>
标签来通过cdn添加jQuery库示例:
<head>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>