/    Sign up×
Community /Pin to ProfileBookmark

Can’t make my select list scroll to bottom

Copy linkTweet thisAlerts:
Sep 03.2004

I use document.createElement(“option”) and add new options to a select list which is defined with “size=”6”. After I get more than 6 entries in the list, I can’t see any new entries without manually scrolling to the bottom.

I have tried setting/resetting “selected” on the newly added options, and I have also tried setting options.selectedIndex to the new option index. Nothing seems to move the scrollbar to the bottom of the list.

Does anybody know how to do this?

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangSep 04.2004 — document.form1.select1.options[document.form1.select1.length-1].selected=true;
Copy linkTweet thisAlerts:
@janaka44Sep 04.2004 — Try this after adding the new Option :

[FONT=courier new]select1.selectedIndex = select1.length -1[/FONT]
Copy linkTweet thisAlerts:
@sruggeroauthorSep 04.2004 — I have tried both solutions suggested by Fang and Janaka. This just doesn't work. I'm using IE6 browser.

Any other ideas?
Copy linkTweet thisAlerts:
@FangSep 04.2004 — My solution is tried and tested.

Can you show the code you are using?
Copy linkTweet thisAlerts:
@sruggeroauthorSep 07.2004 — Hi Fang,

I am creating a single option entry in the "pairs" select list, from two sequential selections in a different select list. When the first selection is made, the PairSource variable is set and addPairSource is called to create the option element for pairs. When the second selection is made, the PairDest variable is set and addPairDest is called to update the "pairs" option created earlier.

The code in place now (uncommented) "sort of" works. That is, the new option doesn't scroll into view after addPairSource runs, but it does scroll into view after addPairDest runs. It didn't seem to work as well when I set "selected" to true.

Sally

---------------------------------------------------------------

<select name="pairs" multiple size="6"></select>

Javascript:

var TO_DEST = " ==> ";

var EPIDSEP = ":";

var PairIndex = null;

var PairSource = null;

var PairSourceId = "0";

var PairDest = null;

var PairDestId = "0";

function addPairSource(Obj)

{

var option = document.createElement("option");

option.text = PairSource + TO_DEST;

option.value = "P" + PairSourceId + EPIDSEP;

Obj.pairs.add(option);

PairIndex = Obj.pairs.length - 1;

// Obj.pairs.options[PairIndex].selected = true;

Obj.pairs.options.selectedIndex = PairIndex;

}

function addPairDest(Obj)

{

Obj.pairs.options[PairIndex].text += PairDest;

Obj.pairs.options[PairIndex].value += PairDestId;

// Obj.pairs.options[PairIndex].selected = true;

Obj.pairs.options.selectedIndex = PairIndex;

PairIndex = null;

}
Copy linkTweet thisAlerts:
@FangSep 08.2004 — This is a simpler way of adding an option:
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Add option&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
var NewText="some text";
var NewValue="x";
function AddOption() {
var obj=document.form1.select1;
//get length of destination box
var BoxLength=obj.length;
//set values of destination select box option
obj.options[BoxLength++]=new Option(NewText, NewValue);
//scroll to bottom
document.form1.select1.options[document.form1.select1.length-1].selected=true;
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action="#" name="form1"&gt;
&lt;p&gt;
&lt;select name="select1" size="6"&gt;
&lt;option value="1"&gt;a&lt;/option&gt;
&lt;option value="2"&gt;b&lt;/option&gt;
&lt;option value="3"&gt;c&lt;/option&gt;
&lt;option value="4"&gt;d&lt;/option&gt;
&lt;option value="5"&gt;e&lt;/option&gt;
&lt;option value="6"&gt;f&lt;/option&gt;
&lt;/select&gt;
&lt;/p&gt;
&lt;p&gt;&lt;button type="button" onclick="AddOption();"&gt;add option&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@sruggeroauthorSep 10.2004 — Fang, I want to use "multiple" in my select list. But that's what creates the problem. I've tried clearing out previous selections before setting the last one, but that doesn't help. If I set "multiple" to "false" before setting "selected" to "true" then it works, but that defeats my purpose.

Thanks for the time you spent on this. If you have other ideas and care to send them, I'm interested. But for now, I think I must reconsider "multiple".
Copy linkTweet thisAlerts:
@htmlfreakJun 09.2005 — Thanks sruggero for the hint. I got this thing working! First I tried flipping 'multiple' to false before setting a selected item then reverting back to true. But that did not work, must be due to rendering mechanism. So I tried setting it after a delay, it works fine:

datesList.multiple = false;

datesList.selectedIndex = datesList.options.length - 1;

window.setTimeout("datesList.multiple = true;", 50);

cheers!
Copy linkTweet thisAlerts:
@sruggeroauthorJun 09.2005 — Thanks htmlfreak for your solution. I still do have this problem--just stopped worrying about it. I will try your timeout fix. It's fun to know somebody's still reading this old stuff.
Copy linkTweet thisAlerts:
@griesejuOct 16.2012 — for IE use something like this:

<HTML><HEAD>

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

</HEAD>

I have tried both solutions suggested by Fang and Janaka. This just doesn't work. I'm using IE6 browser.

Any other ideas?[/QUOTE]
×

Success!

Help @sruggero spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...