Prototype Element

最新推荐文章于 2021-01-31 14:46:37 发布

lee79

最新推荐文章于 2021-01-31 14:46:37 发布

阅读量84

点赞数

分类专栏： Java技术文章标签： JavaScript Prototype ViewUI

Java技术专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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=">" 
          οnclick="moveOptionsAcross($('available'), $('selected'))" />></input>
   <input type="button" value="<" 
          οnclick="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