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;
分享到：
相关推荐
本文将深入探讨Prototype库中与Element对象相关的函数，帮助开发者更好地理解和使用这些功能。 首先，我们来看筛选类函数。这些函数用于从DOM树中筛选出特定的元素。例如，`ancestors()`返回一个包含元素所有父元素...
在Prototype中，`Element`和`Selector`是两个核心概念，它们是实现高效和便捷的DOM操作的关键。 首先，让我们深入探讨`Element`。在Prototype中，`Element`是对JavaScript原生DOM元素的增强。通过`Element`，开发者...
所有函数的第一个参数都为：element，表示要操作的元素的引用，这是为了方面在Element.extend时，把这些方法加入到DOM对象中去，用的是methodize函数。调用的时候不需要输入第一个参数了，如： var b=$(‘div1’)....
**Prototype JavaScript 库** Prototype 是一个广泛使用的JavaScript库，它为Web开发提供了强大的工具和功能。这个库的主要目标是简化JavaScript编程，通过提供面向对象的语法、强大的DOM操作以及Ajax功能，来提升...
6. **特效与动画**：`PrototypeJS`提供了`Effect`模块，用于创建复杂的视觉效果和动画，如淡入淡出、滑动等，通过`Element`对象的方法如`fadeIn()`, `slideUp()`, `slideDown()`等实现。 7. **Selector引擎**：...
2. **DOM操作**：Prototype提供了强大的DOM操作接口，如`Element`和`Selectors`，使得选取和操作页面元素变得非常简单。例如，`$`函数可以快速获取DOM元素，而`$$`函数则能根据CSS选择器选取一组元素。 3. **数组...
例如，`Element.extend`方法允许扩展任何DOM元素的功能，而`$`函数则是一个快速定位DOM元素的实用工具，这在处理复杂页面结构时极大地提高了效率。 除此之外，Prototype_1.7.3.js还提供了丰富的AJAX（异步...
4. **DOM操作**：Prototype提供了一套强大的DOM操作API，如Element对象，可以方便地查找、创建、修改和删除DOM元素。 5. **事件处理**：Prototype简化了事件绑定和解绑，支持事件委托和跨浏览器的事件处理。 6. **...
2.Element方法：如Element.hide()、Element.show()、Element.toggle()等，用于控制元素的可见性。 3.Event.observe：用于绑定事件监听器，可以替代原生的addEventListener。 三、Ajax 1.Ajax.Request：创建并发送...
在1.4中文手册中，你可以找到关于`Element`、`Selector`、`Ajax`等核心类的说明，以及如何利用Prototype进行Ajax通信的方法。1.5中文手册则可能包含了一些新特性，比如可能增加了对CSS选择器的支持或者改进了性能。...
1. Element方法：Prototype对DOM元素提供了大量便捷的操作方法，如`Element.extend()`, `Element.hide()`, `Element.show()`, `Element.update()`等，简化了DOM元素的获取和操作。 2. Selector API：Prototype引入...
Prototype.js 提供了强大的动画功能，如`Element.fade()`、`Element.slideUp()`和`Element.slideDown()`，这些方法可以实现元素的淡入淡出、滑动显示等效果。此外，`Elementmorph()`方法可以平滑地改变元素的尺寸或...
此外，Prototype还提供了许多其他实用的方法，如`Element.extend`用于扩展DOM元素，`Element.hide`和`Element.show`控制元素的可见性，`Element.update`用于替换元素的内容，以及`Element.setStyle`和`Element....
在DOM操作方面，Prototype提供了一套强大的DOM操作接口，如Element.extend()、Element.update()、Element.insert()等，这些方法使得在JavaScript中操作DOM元素变得简单易懂。同时，Prototype的Event模块允许我们方便...
Prototype.js 提供了一系列便捷的 DOM 操作方法，如 `Element.select()` 和 `Element.hide()`。1.6 版本进一步优化了这些方法，提高了性能并减少了代码量。`Element.Methods` 中新增了多个实用方法，使得对 HTML ...
最后，手册中的特效与动画章节教授了如何通过Element.Methods轻松实现各种视觉效果。 Prototype 1.6.js源码： 包含的"prototype.js"文件是Prototype 1.6.0的源代码，这对于开发者来说是一份宝贵的参考资料。通过...
Prototype 提供了一套强大的DOM操作API，如`Element`和`$$`。`Element`类包含了对单个元素的各种操作，如`hide()`, `show()`, `addClassName()`, `removeClassName()`等。`$$$`（或简写为`$$`）是一个选择器引擎，...