表单特效-点击左侧选项选入右侧选择框

最新推荐文章于 2023-04-27 11:18:23 发布
最新推荐文章于 2023-04-27 11:18:23 发布
阅读量2k 收藏 1
点赞数
文章标签： button function javascript input div border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaobingj126/article/details/5614322
版权

<html>
<head>
<title>中国站长天空-网页特效-表单特效-点击左侧选项选入右侧选择框</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function moveOver()
{
var boxLength = document.choiceForm.choiceBox.length;
var selectedItem = document.choiceForm.available.selectedIndex;
var selectedText = document.choiceForm.available.options[selectedItem].text;
var selectedValue = document.choiceForm.available.options[selectedItem].value;
var i;
var isNew = true;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
thisitem = document.choiceForm.choiceBox.options[i].text;
if (thisitem == selectedText) {
isNew = false;
break;
}
}
}
if (isNew) {
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.choiceBox.options[boxLength] = newoption;
}
document.choiceForm.available.selectedIndex=-1;
}
function removeMe() {
var boxLength = document.choiceForm.choiceBox.length;
arrSelected = new Array();
var count = 0;
for (i = 0; i < boxLength; i++) {
if (document.choiceForm.choiceBox.options[i].selected) {
arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
}
count++;
}
var x;
for (i = 0; i < boxLength; i++) {
for (x = 0; x < arrSelected.length; x++) {
if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
document.choiceForm.choiceBox.options[i] = null;
}
}
boxLength = document.choiceForm.choiceBox.length;
}
}
function saveMe() {
var strValues = "";
var boxLength = document.choiceForm.choiceBox.length;
var count = 0;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
if (count == 0) {
strValues = document.choiceForm.choiceBox.options[i].value;
}
else {
strValues = strValues + "," + document.choiceForm.choiceBox.options[i].value;
}
count++;
}
}
if (strValues.length == 0) {
alert("您没有选择任何内容");
}
else {
alert("您选择的内容如下:/r/n"+"第" + strValues+"条");
}
}
// End -->
</script>
<form name="choiceForm">
<table border=0>
<tr>
<td valign="top" width=175>
<div align="center">可选内容:<br>
<select name="available" size=10 οnchange="moveOver();">
<option value="1">内容一</option>
<option value="2">内容二</option>
<option value="3">内容三</option>
<option value="4">内容四</option>
<option value="5">内容五</option>
<option value="6">内容六</option>
<option value="7">内容七</option>
<option value="8">内容八</option>
<option value="9">内容九</option>
<option value="10">内容十</option>
</select>
</div>
</td>
<td valign="top">
<div align="center">你的选择:<br>
<select multiple name="choiceBox" style="width:150;" size="10">
</select>
</div>
</td>
</tr>
<tr>
<td colspan=2 height=10>
<div align="center">
<input type="button" value="删除" οnclick="removeMe();">
<input type="button" value="结果" οnclick="saveMe();">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

bing.shao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
左边选择到右边的html,HTML+JS实现左边选择到右边
weixin_42499100的博客
06-04 1024
工作中遇到一个需求，产品报告里面包含一些原材料的报告，因此在添加产品报告的时候要选择一些原材料报告进来，这样就有了一个多选选择进来，如果把所有的原材料列出来是不合理的实现 像下图这样，原料名称是多选 而且备选有很多。网上找了一个多选左边选择到右边然后确定就可以的。感觉代码比较多，个人代码洁癖所以就自己用js+html写了一个。底部有打包链接地址在此记录 样式如图然后是代码：select.html：...
js从select1选择到select2 左边选择到右边(很好用)
06-26
js从select1选择到select2 左边选择到右边(很好用)
点击左边列表在右边显示选项 多选 单选
07-23
左边一个列表（从数据库里读出的） 右边一个列表 你点击、双击 就可以将左边选中的 显示在右边。可以实现简单的单选 多选的问题。为了你能下载就能运行，所以我就弄了一个简单的列子 可以给你一些重要提示。希望能帮助你
选择左边多选框的值移动到右边多选框
southcamel的专栏
07-29 8290
JS代码如下： /** * 移动select的部分内容,必须存在value，此函数以value为标准进行移动 * oSourceSel: 源列表框对象 * oTargetSel: 目的列表框对象 */ function moveSelected(oSourceSel, oTargetSel) { //建立存储value和text的缓存数组 va
HTML实现点击左侧菜单，右侧内容切换
liyibao111的博客
04-27 4600
使用iframe标签，在html项目实现
ajax实现简单的点击左侧菜单，右侧加载不同网页
祈澈菇凉
05-03 1614
实现：ajax实现点击左侧菜单，右侧加载不同网页（在整个页面无刷新的情况下实现右侧局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可） 图片.png 原理：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址...
点击父组件按钮 显示子组件_按钮设计用户界面组件系列
weixin_26715991的博客
09-15 677
点击父组件按钮 显示子组件 重点 (Top highlight)In order to design the right interactions, we need to look back at the history and origins of physical pushbuttons, a direct predecessor of the UI component so heavily ...
左侧选择，右侧显示选择对应的内容
weixin_39388156的博客
07-25 4868
布局以及样式，是否应用到前端路由
表单checkbox多选框选择特效
04-06
在“表单checkbox多选框选择特效”中，我们主要探讨的是如何利用CSS3来增强多选框的视觉效果，使其在用户交互时更加吸引人，提升用户体验。 CSS3是层叠样式表的最新版本，它引入了许多新的特性和功能，为Web开发者...
表单checkbox多选框选择特效.zip
07-05
"表单checkbox多选框选择特效.zip" 是一个专门针对多选框选择效果进行优化和美化的资源包。通过这个压缩包，我们可以实现更加吸引人且用户体验良好的多选功能。 首先，我们来探讨一下CSS3如何实现表单的美化。CSS3...
Javascript左右选择框
04-11
适用于入门前端 学习的小白参考学习，是经典的demo,适用于左侧选择框选择，选中的放到右侧
jQuery的表单复选框特效.zip
07-11
jQuery表单复选框与单选框美化特效</title> <link rel="stylesheet" type="text/css" href="css/iconfont.css?3.1.64"/> <link rel="stylesheet" type="text/css" href="css/multiselect.css?3.1....
jQuery表单复选框与单选框美化特效
06-10
复选框（`<input type="checkbox">`）允许用户在多个选项中选择一个或多个，而单选框（`<input type="radio">`）则让用户在多个互斥的选项中选择一个。这些元素默认样式通常较为单调，不符合现代网页设计的需求。 ...
javascript 复选框选择/全选后特效
10-30
JavaScript 复选框选择/全选后特效 JavaScript 复选框选择/全选后特效是指在 HTML 表单中使用 JavaScript 来实现复选框的选择和全选功能，并在选择或全选后触发特效。本文将详细介绍如何使用 JavaScript 实现复选框...
JQuery，实现双击下拉框选项时，将选项添加到右侧下拉框，双击右侧下拉框时，将选项添加到左侧下拉框
xiaoxiali的专栏
07-17 3993
转自：http://zhidao.baidu.com/question/401258354.html?seed=0 DOM $(function(){ $("#select1").dblclick(function(){ var $option = $("#select1 option:selected"); $optio
splice删除选中列表_【原创】jquery-左勾选（checkbox单选/全选） 选到 右列表（删除） -数组+clone-经典全面版本...
weixin_33193480的博客
01-17 244
前言实际工作中，此模型经常会遇到过，今天花点时间，整理下思路，做了一个较为全面的demo。以备将来回忆使用。思考(特别注意)此例只是将data-id获取过来，放到数组里，然后clone元素。本例适合左右两边数据显示一致。特别注意：如果两边不太一样，则要用，点击后，获取该点击项的多个属性存放到对象中。然后，在需要的地方遍历这个对象，以不同的样式和字段来格式化显示已选择的信息。这个例子请移步====》...
左侧树形结构，右侧表格多选，表格多选回显问题
小米人的博客
12-31 789
场景复原 注意点 1、回显的数据，必须要有对应的唯一值。 实现思路 主要是回显的时候，问题提交大。 首先，需要一个大的集合{};来存储勾选的数据。 例如：{树形唯一值id:[表格勾选的数据01，表格勾选的数据01....]} 其次，表格☑️勾选的时候，需要把值存起来，如上结构。 然后，切换左侧树分组的时候，需要将集合中的数据，取出来，在表格中，做对应的回显。 最后，将数据回填在input框内时，循环处理集合即可。 在做编辑的时候，先初始化后端返回来的数据，放到集合中。这样就不会存在遗漏。 只是个人的思路
vxe-table表单多个复选框
最新发布
11-22
可以使用vxe-table的selection-config配置项来实现表单中多个复选框的功能。具体步骤如下： 1. 在表格的columns中添加一个type为selection的列，用于显示复选框。 2. 在表格的props中设置selection-config属性，用于配置复选框的相关参数，例如选中的行数据、选中的key值等。 3. 在表格的methods中添加一个handleSelectionChange方法，用于处理复选框选中状态的变化。 下面是一个示例代码： ```html <template> <vxe-table :data="tableData" :columns="tableColumns" :selection-config="selectionConfig" @selection-change="handleSelectionChange"> </vxe-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'John', age: 20, gender: 'Male' }, { id: 2, name: 'Mary', age: 25, gender: 'Female' }, { id: 3, name: 'Tom', age: 30, gender: 'Male' } ], tableColumns: [ { type: 'selection', width: 60 }, { field: 'id', title: 'ID', width: 80 }, { field: 'name', title: 'Name', width: 120 }, { field: 'age', title: 'Age', width: 80 }, { field: 'gender', title: 'Gender', width: 100 } ], selectionConfig: { checkField: 'selected', checkMethod: (params) => { return params.row.selected }, checkAllMethod: (params) => { return params.rows.every(row => row.selected) }, checkRowKey: 'id' } } }, methods: { handleSelectionChange(selection) { console.log(selection) } } } </script> ``` 在上面的示例代码中，我们在tableColumns中添加了一个type为selection的列，用于显示复选框。在selectionConfig中配置了复选框的相关参数，例如选中的行数据、选中的key值等。在methods中添加了一个handleSelectionChange方法，用于处理复选框选中状态的变化。当用户选中或取消选中某一行数据时，handleSelectionChange方法会被调用，并将选中的行数据作为参数传入。我们可以在该方法中处理选中状态的变化，例如将选中的行数据保存到一个数组中，或者将选中的行数据发送到后台进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值