1. select
<select name="mySelect" id="mySelect">
<option value="1" id="option1">1</option>
<option value="2" id="option2">2</option>
</select>
1) traversal
var options = $$('select#mySelect option');
var len = options.length;
for (var i = 0; i < len; i++) {
alert('Option text = ' + options[i].text);
alert('Option value = ' + options[i].value);
if (options[i].selected) {
alert('selected');
}
}
2)get the currently selected option
var item = $$('#mySelect option').find(function(ele){return !!ele.selected})
if (item) {
alert(item.text);
alert(item.value);
}
3)move selected options from one select to another?
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<h1>Hello World</h2>
<div style="border:solid 1px black">
<select id="leftSelect" multiple="multiple" size="3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<span class="test">
<button id="moveRightBtn">>></button><br/>
<button id="moveLeftBtn"><<</button>
</span>
<select id="rightSelect" multiple="multiple" size="3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<script type="text/javascript">
document.observe("dom:loaded", function()
{
Event.observe("moveRightBtn", "click", function()
{
move($("leftSelect"), $("rightSelect"));
});
Event.observe("moveLeftBtn", "click", function()
{
move($("rightSelect"), $("leftSelect"));
});
});
function move(sourceSelect, targetSelect)
{
var options = sourceSelect.select("option");
options.each(function(item)
{
if(item.selected)
{
item.selected = false;
targetSelect.appendChild(item.remove());
}
});
}
</script>
</body>
3.2)
<select id="available" size="10" multiple="multiple"></select>
<input type="button" value=">"
onclick="moveOptionsAcross($('available'), $('selected'))" />></input>
<input type="button" value="<"
onclick="moveOptionsAcross($('selected'), $('available'))" /><</input>
<select id="selected" size="10" multiple="multiple"></select>
// moveOptionsAcross
//
// Move selected options from one select list to another
//
function moveOptionsAcross(fromSelectList, toSelectList) {
var selectOptions = fromSelectList.getElementsByTagName('option');
for (var i = 0; i < selectOptions.length; i++) {
var opt = selectOptions[i];
if (opt.selected) {
fromSelectList.removeChild(opt);
toSelectList.appendChild(opt);
// originally, this loop decremented from length to 0 so that you
// wouldn't have to worry about adjusting the index. However, then
// moving multiple options resulted in the order being reversed from when
// was in the original selection list which can be confusing to the user.
// So now, the index is adjusted to make sure we don't skip an option.
i--;
}
}
}
4)set to be selected
$('mySelect').value = 2;
分享到：
相关推荐
Element，哈哈哈。遇到正主了，到现在为止才遇到让我高兴的玩意。当初Ext.Element可是花三千余行代码专门来封装啊。...事实上prototype中我最想研究的只有两个内容：Element、Selector。这两个东西是精华。
所有函数的第一个参数都为：element，表示要操作的元素的引用，这是为了方面在Element.extend时，把这些方法加入到DOM对象中去，用的是methodize函数。调用的时候不需要输入第一个参数了，如： var b=$(‘div1’)....
一、筛选类函数 ancestors、recursivelyCollect、descendants、firstDescendant、immediateDescendants、previousSiblings、nextSiblings、siblings、match、up、down、previous、next、select、adjacent。...
Table of Contents 1. Programming Guide 1.1. Prototype是什么?...2.18. Element 对象 2.19. Abstract 对象 2.20. Abstract.Insertion 类 2.21. Insertion 对象 2.22. Insertion.Before 类 2.23. Insertion.Top 类
1. Prototype是什么? 3 2. 通用性方法 3 2.1. 使用 $()方法 3 2.2. 使用$F()方法 4 2.3. 使用Try.these()方法 5 3. Ajax 对象 5 3.1. 使用 Ajax.Request类 5 3.2. 使用 Ajax.Updater 类 7 4...
endnote文献管理软件中的，文献导入时，可以使用它来导入维普和万方的文献目录了，
babel-plugin-transform-custom-element-classes, 编译 ES6 HTMLElement类扩展到 ES5 babel-plugin-transform-custom-element-classes编译扩展了ES5环境的HTMLElement的自定义元素类。问题自定义元素是针对原生ES6类...
require ( 'webcomponents.js' )const styles = require ( 'custom-element-styles' )const CustomElement = { prototype : Object . create ( HTMLElement . prototype )}styles ( CustomElement , ` h1 { color: ...
方法Element.prototype.hasClass //与jQuery等效Element.prototype.addClass //与jQuery等效Element.prototype.removeClass //与jQuery等效Element.prototype.toggleClass //与jQuery等效Element.prototype....
$(element)：getElementById的封装，element可以是一个元素的id或元素本身，也可以是一个数组，这时返回一个数组，使用$方法，会自动调用Element.extend(element)方法，这样的话使元素可以直接调用Element中的方法, ...
本文实例讲述了prototype框架中美元符号$用法。分享给大家供大家参考，具体如下： prototype是实现面向对象的一个重要工具，是javascript的一个不错的框架。 用jquery的人都知道，jquery中也有$美元符号，prototype...
这一部分提供了很多与表单操作有关的功能，包括以下部分，当通过$方法返回元素时，可以直接通过$(element).method()调用： Form对象：提供了操作整个表单的一些方法Form.Element对象：提供了操作某个表单元素的方法...
prototype.js 常用函数 : Element.toggle 交替隐藏或显示 Element.toggle(”div1”,”div2”) Element.hide 隐藏 Element.hide(”div1”,”div2”) Element.show 显示 Element.show(”div1”,”div2”) ...
基本元素用于创建独立元素和高性能... prototype )// Or inherits(Bear, BaseElement)// Or class Bear extends BaseElement 然后构建您的元素： Bear . prototype . render = function ( typeOfBear ) { // Create a
jquery有dom ready方法，推迟js函数的绑定知道dom树完成（如果没有这个功能，一些element的事件函数之类的绑定可能会出错）: $(document).ready(function(){}); 但是prototype是没有的。。。得自己找非官方的扩展...
使用简单条件通过Array.prototype.indexOf()查找元素 使用Array.prototype.find()使用更复杂的条件查找元素 介绍 作为开发人员，我们需要定期做的一件事情是将对象放置在数组中。 能够存储数据固然很好，但是除非...
/** * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号 */ var Prototype = { Version: ‘@@VERSION@@’ } /** * 创建一种类型，注意其属性 create 是一个方法，返回一个构造函数...