js控制多选框左右移动

<script language="JavaScript">
var employee = new Array();
employee[0] = ['办公室', '办公室人员1|01', '办公室人员2|02', '办公室人员3|03'];
employee[1] = ['财务部', '财务部人员1|11', '财务部人员2|12', '财务部人员3|13'];
employee[2] = ['技术部', '技术部人员1|21', '技术部人员2|22', '技术部人员3|23'];
employee[3] = ['工程部', '工程部人员1|31', '工程部人员2|32', '工程部人员3|33'];
employee[4] = ['预算部', '人技术部员1|41', '人技术部员2|42', '人技术部员3|43'];

function window.onload() {
for (var i=0; i<employee.length; i++)
form1.s1.options.add(new Option(employee[i][0], i));
}

function check_employee(ID) {
for (var i=0; i<form1.s3.options.length; i++)
if (form1.s3.options[i].value == ID)
return false;
return true;
}

function select_employee(v) {
form1.s2.options.length = 0;
for (var i=1; i<employee[v].length; i++)
if (check_employee(employee[v][i].split('|')[1])) form1.s2.options.add(new Option(employee[v][i].split('|')[0], employee[v][i].split('|')[1]));
}

function move_right() {
if (form1.s2.selectedIndex >= 0) {
form1.s3.options.add(new Option(form1.s2.options[form1.s2.selectedIndex].text, form1.s2.options[form1.s2.selectedIndex].value));
form1.s2.options[form1.s2.selectedIndex].removeNode(true);
}
else { alert('请选择一个员工'); }
}

function move_left() {
form1.s3.selectedIndex >= 0 ? form1.s3.options[form1.s3.selectedIndex].removeNode(true) : alert('请选择一个员工');
if (form1.s1.selectedIndex >= 0) select_employee(form1.s1.selectedIndex);
}

function move_right_all() {
for (var i=0; i<form1.s2.options.length; i++)
form1.s3.options.add(new Option(form1.s2.options[i].text, form1.s2.options[i].value));
form1.s2.options.length = 0;
}

function move_left_all() {
form1.s3.options.length = 0;
if (form1.s1.selectedIndex >= 0) select_employee(form1.s1.selectedIndex);
}

function employee_submit() {
var userlist = new Array();
for (var i=0; i<form1.s3.options.length; i++)
userlist[userlist.length] = form1.s3.options[i].value;
alert(userlist);
}
</script>

<form name="form1" method="post" action="">
<table>
<tr><td>部门<br><select name="s1" size="15" style="width:100px;" onChange="select_employee(this.value)"></select></td>
<td>部门人员<br><select name="s2" size="15" style="width:100px;" onDblClick="move_right()"></select></td>
<td><input type="button" value="==>" onClick="move_right()"><br><br><input type="button" value="<==" onClick="move_left()"><br><br><input type="button" value="全选" onClick="move_right_all()"><br><input type="button" value="全删" onClick="move_left_all()"></td>
<td>选定人员<br><select name="s3" size="15" style="width:100px;" onDblClick="move_left()"></select></td>
</tr>
</table>
用户选择列表框,©风云突变 Dec 2003
<input type="button" value="确定" onClick="employee_submit()">
</form>

 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要取消fabric.js中的多选框控制点,可以使用set({hasControls: false})方法来禁用对象的控制点。 例如: ``` canvas.on('selection:created', function(e) { e.selected.forEach(function(obj) { obj.set({hasControls: false}); canvas.renderAll(); }); }); ``` 这样就可以在选择对象时禁用控制点了。 ### 回答2: fabric.js 是一款强大的HTML5画布库,可以实现多种功能,其中之一是多选框的使用。当我们在fabric.js中使用多选框时,可以通过以下步骤取消控制点。 1. 首先,我们需要创建一个多选框对象,可以使用`new fabric.Rect({width: 200, height: 100, stroke: '#000', strokeWidth: 2, fill: 'transparent'})`来创建一个矩形对象作为多选框。 2. 接下来,我们需要在画布中添加多个可选的对象,可以使用`canvas.add()`方法将对象添加至画布中。 3. 当我们需要取消控制点时,可以通过以下步骤实现。首先,我们需要获取当前选中的所有对象,可以使用`canvas.getActiveObjects()`方法获取当前被选中的对象数组。 4. 接着,我们需要遍历这个对象数组,并调用`setControlVisible()`方法,将控制点设置为不可见。这个方法需要传入一个参数来指定哪些控制点应该设置为不可见。可以使用`'tl', 'tr', 'bl', 'br', 'ml', 'mt', 'mr', 'mb'`来分别代表控制点的位置。 5. 最后,我们需要调用`canvas.renderAll()`方法,来重新渲染画布,使我们的修改生效。 综上所述,我们可以通过以上步骤来取消fabric.js多选框控制点。这样,我们就能够在使用多选框的同时,根据需要灵活地控制控制点的显示与隐藏。fabric.js的强大功能使得我们在开发交互式图形应用时更加便捷和灵活。 ### 回答3: 在fabric.js中,我们可以通过以下步骤来取消多选框控制点: 1. 获取选中的对象:首先,我们需要获取当前选中的对象。可以使用canvas的getActiveObjects()方法来获取被选中的多个对象,或者使用canvas的getActiveObject()方法来获取单个选中的对象。 2. 取消控制点:一旦我们获取到了选中的对象,我们可以使用selected对象的hasControls属性来判断该对象是否有控制点。如果有,我们可以将其设置为false,从而取消该对象的控制点。例如,selected.set('hasControls', false)。 3. 重新渲染:最后,我们需要重新渲染canvas来使更改生效。可以使用canvas的renderAll()方法来重新渲染canvas。 下面是一个示例代码: ```javascript // 获取选中的对象 var selected = canvas.getActiveObjects(); // 取消控制点 selected.forEach(function(object) { if (object.hasControls) { object.set('hasControls', false); } }); // 重新渲染 canvas.renderAll(); ``` 通过以上步骤,我们可以在fabric.js中取消多选框控制点。这样做可以用于某些特殊情况下,当我们不希望某些对象被用户移动或调整大小时,可以禁用其控制点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值