mootools_使用MooTools 1.2进行多选传输

mootools

While I was a Zone Leader for DZone's AJAX, CSS, and PHP Zones, DZone's Rick Ross asked me to contact Jeremy Martin with regard to a hot blog post he created: Easy Multi Select Transfer with jQuery. Both Rick and I were impressed with Jeremy's script and asked him to repost on DZone.

当我担任DZone的AJAX，CSS和PHP区域的区域负责人时，DZone的里克·罗斯(Rick Ross)要求我联系杰里米·马丁 ( Jeremy Martin) ，以撰写他撰写的热门博客文章： jQuery的Easy Multi Select Transfer 。 里克和我都对杰里米的剧本印象深刻，并要求他在DZone上重新发布。

Fast forward five months later, I decided that I simply had to create a MooTools script that would accomplish the same goal. I mean, if Jeremy's going to port the Kwicks effect to jQuery, why can't I take one back for the Moo team? In the end, the MooTools code looks very much like jQuery's code.

快进五个月后，我决定只需要创建一个MooTools脚本即可实现相同的目标。 我的意思是，如果杰里米(Jeremy)要把Kwicks 效果 移植 到jQuery上 ，为什么我不能为Moo团队找回呢？ 最后，MooTools代码看起来非常类似于jQuery的代码。

View Demo 观看演示

HTML (The HTML)

<div class="holder">
	<select multiple="multiple" id="select1" name="select1[]">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
	</select>
	<a href="javascript:;" id="add">add >></a>
</div>
<div class="holder">
	<select multiple="multiple" id="select2" name="select2[]">
		<option value="5">Option 5</option>
		<option value="6">Option 6</option>
	</select>
	<a href="javascript:;" id="remove"><< remove</a>
</div>

MooTools JavaScript (The MooTools JavaScript)

window.addEvent('domready', function() {
	$('add').addEvent('click', function() {
		$('select1').getSelected().each(function(el) {
			el.inject($('select2'));
		});
	});
	$('remove').addEvent('click', function() {
		$('select2').getSelected().each(function(el) {
			el.inject($('select1'));
		});
	});
});

All we need to do is move the selected <option> elements to the other select list.

我们需要做的就是将选定的<option>元素移至另一个选择列表。

View Demo 观看演示

Note that the PHP $_POST variable receives the values correctly. Very practical and functional!

请注意，PHP $ _POST变量正确接收值。 非常实用和实用！

翻译自: https://davidwalsh.name/multi-select-transfers-using-mootools-12

mootools