html多选框选中事件,HTML多选框
(HTMLmultipleselectbox)
这⾥有⼀个⼩样本,让你开始: jsfiddle/eUDRV/3/
这个例⼦会从左边的项⽬(⼀个或多个)移动到右边,然后再返回。 ⽆论项⽬(S)在右侧选择将更新右侧的⽂本框中。
我们正在使⽤的元素:
select
input type="button"
input type="text"borderbox
装裱⽅式:
div
section
风格与简单的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").()); }); 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; }
123

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。