Prototype Element

阅读更多

1. select

  
    1
    2
  

 

  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?

    





    
Hello World

    


        
            One
            Two
            Three
        

        
            >>

            <<
        

        
            One
            Two
            Three
        

    

    

 3.2)

   
   >
   <
   

// 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;