AJAX

Multiple select autoscroll to last item

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2008

Posts: 55

Reputation: kvdd is an unknown quantity at this point

Solved Threads: 2

kvdd

Offline

Junior Poster in Training

Re: Multiple select autoscroll to last item

#11

Oct 2nd, 2008

Anyone has the time to look at this problem, its just not solved right now.

Thanks in advance

•

Join Date: Aug 2008

Posts: 381

Reputation: langsor is an unknown quantity at this point

Solved Threads: 33

langsor

Offline

Posting Whiz

Re: Multiple select autoscroll to last item

#12

Oct 2nd, 2008

Hi, I've been busy with many things that have been keeping me away from the computer the last several weeks ... sorry for the lag time in getting back to this.

It's actually pretty easy to modify this script to act on specific form-element fields instead of on the forms.

Try this:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
 
window.onload = function () {
  // Since we only need to auto-scroll the select elements
  // after the page has loaded ...
  // list auto-scroll selects by id
  select_list = new Array( 'test_one', 'test_too' );
  scroll_selected( select_list );
};
 
function scroll_selected ( selects ) {
  OUTER: for ( var i = 0; i < selects.length; i ++ ) {
    var select = document.getElementById(selects[i]);
    var opts = select.getElementsByTagName('option');
    for ( var j = opts.length -1; j > 0; --j ) {
      if ( opts.item(j).selected == true ) {
        select.scrollTop = j * opts.item(j).offsetHeight;
        opts.item(j).selected = true;
        continue OUTER;
      }
    }
  }
}
</script>
</head>
<body style="padding:60px">
<form>
  <p>Select Multiple:<br />
  <select id="test_one" multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3" selected>three</option>
    <option name="four" value="4">four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6" selected>six</option>
  </select>
  <p>Select One:<br />
  <select size="3">
    <option name="one" value="1" selected>one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3">three</option>
    <option name="four" value="4">four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
  <p>Select Multiple:<br />
  <select id="test_too" multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3" selected>three</option>
    <option name="four" value="4" selected>four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
  <p>
  <input type="submit" />
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">

window.onload = function () {
  // Since we only need to auto-scroll the select elements
  // after the page has loaded ...
  // list auto-scroll selects by id
  select_list = new Array( 'test_one', 'test_too' );
  scroll_selected( select_list );
};

function scroll_selected ( selects ) {
  OUTER: for ( var i = 0; i < selects.length; i ++ ) {
    var select = document.getElementById(selects[i]);
    var opts = select.getElementsByTagName('option');
    for ( var j = opts.length -1; j > 0; --j ) {
      if ( opts.item(j).selected == true ) {
        select.scrollTop = j * opts.item(j).offsetHeight;
        opts.item(j).selected = true;
        continue OUTER;
      }
    }
  }
}
</script>
</head>
<body style="padding:60px">
<form>
  <p>Select Multiple:<br />
  <select id="test_one" multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3" selected>three</option>
    <option name="four" value="4">four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6" selected>six</option>
  </select>
  <p>Select One:<br />
  <select size="3">
    <option name="one" value="1" selected>one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3">three</option>
    <option name="four" value="4">four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
  <p>Select Multiple:<br />
  <select id="test_too" multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3" selected>three</option>
    <option name="four" value="4" selected>four</option>
    <option name="five" value="5">five</option>
    <option name="six" value="6">six</option>
  </select>
  <p>
  <input type="submit" />
</form>
</body>
</html>

Google is the answer to all of your questions -- the trick is knowing what question to ask in your specific predicament.

•

Join Date: Jun 2008

Posts: 55

Reputation: kvdd is an unknown quantity at this point

Solved Threads: 2

kvdd

Offline

Junior Poster in Training

Re: Multiple select autoscroll to last item

#13

Oct 9th, 2008

Langsor, much thanks I cannot test the code now, but I test it within a week, and then I post if it is working.

Much thanks for taking time, you hear from me!