Prototype Element

lee79 · 发表于 2013-1-29 08:40:24

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">&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[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;

		自动登录	找回密码
密码			立即注册