Multiple select autoscroll to last item

Question

kvdd 7 Junior Poster in Training

16 Years Ago

Hello,

I am a bit a loser with JavaScript, but I found the following code to auto scroll a multiple select box to the last selected item.

Function autoscroll()
{
var lst = From1.Listbox1 
if ((lst.multiple==true) && (lst.length>0)) {
if (lst[lst.length-1].selected==true) {
lst[lst.length-1].selected=true;
return;
}
else {
lst[lst.length-1].selected=true;
lst[lst.length-1].selected=false;
}
for (var i=0; i< lst.length;++i)
if (lst.selected==true) {
lst.selected=true;
return;
}
}}

But when I put it in my code it does notting.

I have 3 multiple select list boxes that all must scroll to the latest selected item in the list.
When the user clicks on it, the onclick event is called: onclick="submit()"
Does anyone know how to get the above function work?

Thanks before!

javascript

3 Contributors
12 Replies
2K Views
1 Month Discussion Span
Latest Post 16 Years Ago Latest Post by kvdd

langsor

16 Years Ago

Hey, the problem with the method you have here (besides it not being documented how to use it), is that it only appears to work in IE browsers (at least not Firefox).

So I wrote my own that seems to work in IE7 and FF3 and who knows what other browsers -- but of course it doesn't work in Opera

Hope it helps.

<html>
<head>
<script type="text/javascript">

window.onload = function () {
  register_selects('test');
};

function register_selects( form_id ) {
  var form = document.getElementById(form_id);
  selects = form.getElementsByTagName('select');
  for ( var i = 0; i < selects.length; i ++ ) {
    selects.item(i).onclick = function () {
      var opts = this.getElementsByTagName('option');
      for ( var j = opts.length -1; j > 0; --j ) {
        if ( opts.item(j).selected == true ) {
          this.scrollTop = j * opts.item(i).offsetHeight;
          return;
        }
      }
    };
  }
}
</script>
</head>
<body>
<form id="test">
  <select multiple size="3">
    <option name="one" value="1">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>
  <select multiple size="3">
    <option name="one" value="1">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>
</form>
</body>
</html>

langsor

16 Years Ago

I will try to look at it when I have more time ... but why do you need it to scroll to the last selected option if you're submitting the form?

I believe your current problem is that this line
echo '<select name="'.$aName[$i].'" multiple size="3" onclick="submit();">';
is overwriting the event handler from this line
selects.item(i).onclick = function () {

If you need a form submit action when you click the select element and also need it to scroll to the last element (?) then you can add a submit to the function I wrote ...
this.scrollTop = j * opts.item(i).offsetHeight;
//return; // REPLACE RETURN WITH SUBMIT
this.submit();

Hope this helps

langsor

16 Years Ago

We were scrolling down the select field when the user clicked an option, and Firefox will automatically scroll to the bottom select when the page loads, but IE doesn't.

So we simply need to separate the scroll behavior from the click behavior, and then also call the scroll behavior when the page loads.

I do believe this will work now ... let me know

<html>
<head>
<script type="text/javascript">

window.onload = function () {
  register_selects('test');
  scroll_selected('test');
};

function register_selects( form_id ) {
  var form = document.getElementById(form_id);
  var selects = form.getElementsByTagName('select');
  for ( var i = 0; i < selects.length; i ++ ) {
    selects.item(i).onclick = function () {
      scroll_selected( this );
      form.submit();
    };
  }
}

function scroll_selected ( form ) {
  var form = ( typeof form == 'string' ) ? 
    document.getElementById(form) : form;
  var selects = form.getElementsByTagName('select');
  OUTER: for ( var i = 0; i < selects.length; i ++ ) {
    var opts = selects.item(i).getElementsByTagName('option');
    for ( var j = opts.length -1; j > 0; --j ) {
      if ( opts.item(j).selected == true ) {
        selects.item(i).scrollTop = j * opts.item(j).offsetHeight;
        opts.item(j).selected = true;
        continue OUTER;
      }
    }
  }
}
</script>
</head>
<body>
<form id="test">
  <select 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>
  <select multiple size="3">
    <option name="one" value="1">one</option>
    <option name="two" value="2">two</option>
    <option name="three" value="3">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>
  <br />
  <input type="submit" />
</form>
</body>
</html>

Cheers

...

kvdd commented: Very nice code, helped me much!! +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kvdd 7 Junior Poster in Training · Answer 1 · 2008-08-27T14:33:58+00:00

Much thanks for it, it seems to work in Firefox, but not in IE.
Edit:Ouch! seems that it also does not work in Firefox! my mistake!

I have edited it to a simple example of my situation. Namely that I use onclick="submit();" when the user clicks an option from the list.
The code below is the edited version of yours (I have not edited the JavaScript), and it does not work in IE.

<html>
<body>
<head>
<script type="text/javascript">

window.onload = function () {
  register_selects('test');
};

function register_selects( form_id ) {
  var form = document.getElementById(form_id);
  selects = form.getElementsByTagName('select');
  for ( var i = 0; i < selects.length; i ++ ) {
    selects.item(i).onclick = function () {
      var opts = this.getElementsByTagName('option');
      for ( var j = opts.length -1; j > 0; --j ) {
        if ( opts.item(j).selected == true ) {
          this.scrollTop = j * opts.item(i).offsetHeight;
          return;
        }
      }
    };
  }
}
</script>
</head>

<?php 
// Debugging: print the GETS
print_r($_GET); 

// The numbers of the options in an array (Cijfer is Dutch for Number)
$aCijfers = array('one','two','three','four','five','six','seven');
// The names of the selects in an array
$aName = array('tes1','tes2');

// Start form
echo '<form id="test" method="GET" action="">';

// Loop for displaying the two selects
for ($i=0; $i<2; $i++){
	echo '<select name="'.$aName[$i].'" multiple size="3" onclick="submit();">';
	// Loop for displaying the options
	foreach ($aCijfers AS $id => $cijfer){
		echo '<option name="'.$cijfer.'" value="'.$id.'"'; 
		// When the GET name holds the number of variable id, then echo selected
		if ($_GET[$aName[$i]] == $id){echo ' selected';} 
		echo ' >'.$cijfer.'</option>';
	}
	echo '</select>';
}
?>

  <input type="submit" name="ok" value="ok" />
</form>
</body>
</html>

kvdd 7 Junior Poster in Training · Answer 2 · 2008-08-29T13:48:04+00:00

I will try to look at it when I have more time ... but why do you need it to scroll to the last selected option if you're submitting the form?

Because when the form submits, another form gets changed, after the POST of the submit. And the scrolling is needed, because I have some multiple selects, that can have 30 or more items in it. The user can click one, and when needed(almost the time) click another one too(thus: more than one selected at the same time). When the form submits, he must scroll again to the last one that he has checked, to continue his selections where he was left, and that is frustrating :)

I believe your current problem is that this line
echo '<select name="'.$aName[$i].'" multiple size="3" onclick="submit();">';
is overwriting the event handler from this line
selects.item(i).onclick = function () {

I have removed the onclick in the upper redline now..

If you need a form submit action when you click the select element and also need it to scroll to the last element (?) then you can add a submit to the function I wrote ...
this.scrollTop = j * opts.item(i).offsetHeight;
//return; // REPLACE RETURN WITH SUBMIT
this.submit();
Hope this helps

Thank you very much, I thought when I saw it, this is the solution, but I get JavaScript errors like: this.submit is not a function. And when I change it to submit(); instead of this.submit(); I get the error: submit is not defined I hope you will have the time to help me further, much thanks for that what you did already!

kvdd 7 Junior Poster in Training · Answer 3 · 2008-08-29T14:05:55+00:00

I have changed: this.submit(); to form.submit(); and now it works how it must be! But only in Firefox :s
I have Internet Explorer no errors, but it does not scroll to the latest position, thus it does notting with the JavaScript.

Do you know how this can be?

kvdd 7 Junior Poster in Training · Answer 4 · 2008-09-20T14:35:42+00:00

I am so sorry langsor, I have now tested your code (my project has a month stopped) and it works like a sharm!

Thanks for this Langsor, I am going to learn JavaScript too, because I see its a nice language combined with PHP. :)

essential 84 Posting Shark Featured Poster · Answer 5 · 2008-09-20T18:08:08+00:00

This may come in handy!

<html>
<head>
<title><!-- Sample --></title>

<script type="text/javascript">
<!-- 
function scrollDown() 
{ t = form1.list;
for ( var x = 0; x <= t.options.length; x++ ) { t.options[x].selected = true; 
 }
}

window.onload = function() 
{ 

var el = document.getElementsByTagName('option');

for ( var i = 0; i <= el.length; i++ ) {
el[i].attachEvent('onclick', scrollDown);
 }
}
//-->
</script>

</head>
<body>
<form name="form1">
<select name="list" size="4"  multiple>
<option value="">Selection 1</option>
<option value="">Selection 2</option>
<option value="">Selection 3</option>
<option value="">Selection 4</option>
<option value="">Selection 5</option>
<option value="">Selection 6</option>
<option value="">Selection 7</option>
<option value="">Selection 8</option>
<option value="">Selection 9</option>
<option value="">Selection 10</option>
</select>
</form>
</body>
</html>

kvdd 7 Junior Poster in Training · Answer 6 · 2008-09-26T15:19:49+00:00

Langsor,

I very sorry, but I must ask you again:

I have a form with different selects, some selects of that form must be not autoscrolled, such as not-multiple selects.

When I edit the code, and remove the id="test" from the <form> item, and add by the selects I want to scroll the following: <select id="test" the whole script won't work.

If you have patience, will you look at this?

kvdd 7 Junior Poster in Training · Answer 7 · 2008-10-02T15:48:58+00:00

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

Thanks in advance

langsor · Answer 8 · 2008-10-02T22:56:12+00:00

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:

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

kvdd 7 Junior Poster in Training · Answer 9 · 2008-10-09T15:39:08+00:00

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!