Prototype Element
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.text); alert('Option value = ' + options.value); if (options.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">&gt;&gt;</button><br/> <button id="moveLeftBtn">&lt;&lt;</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=">" />></input> <input type="button" value="<" /><</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; 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;
页:
[1]