我只是想知道下面的表格的名称是什么?我从早上就在谷歌上搜索 HTML 表单列表,但我在任何地方都找不到这种表单。谁能告诉我这个表单的确切名称以及它是否可以在 HTML 表单中使用?
我只想在我的网站中添加这种形式。它适用于 HTML 还是我应该使用 JavaScript 还是它仅适用于 Windows 应用程序?
这是一个可以帮助您入门的小示例:http://jsfiddle.net/eUDRV/3/ http://jsfiddle.net/eUDRV/3/
此示例会将项目(一个或多个)从左向右移动,然后再返回。无论在右侧选择什么项目,都会更新右侧的文本框。
我们正在使用以下元素:
select
input type="button"
input type="text"
框架由:
使用简单的 CSS 进行样式设置。功能由 JavaScript 提供。
我使用 jQuery 库让事情变得更容易一些。这也可以使用纯 JavaScript 来完成。
$("#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/1.9.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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)