Prototype Element

4968 단어 JavaScriptprototype
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=">" 
          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;
iframe 에 클릭 이벤트 추가
Spring Boot에서 RequestBody, MultipartFile 저장하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage