www.webdeveloper.com
Results 1 to 11 of 11

Thread: Can't make my select list scroll to bottom

  1. #1
    Join Date
    Sep 2004
    Posts
    5

    Can't make my select list scroll to bottom

    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?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    document.form1.select1.options[document.form1.select1.length-1].selected=true;

  3. #3
    Join Date
    Aug 2004
    Posts
    28
    Try this after adding the new Option :

    select1.selectedIndex = select1.length -1

  4. #4
    Join Date
    Sep 2004
    Posts
    5
    I have tried both solutions suggested by Fang and Janaka. This just doesn't work. I'm using IE6 browser.

    Any other ideas?

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    My solution is tried and tested.
    Can you show the code you are using?

  6. #6
    Join Date
    Sep 2004
    Posts
    5
    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;
    }

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This is a simpler way of adding an option:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Add option</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    <!--
    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;
    }
    //-->
    </script>
    </head>
    <body>
    <form action="#" name="form1">
    <p>
    <select name="select1" size="6">
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
    <option value="4">d</option>
    <option value="5">e</option>
    <option value="6">f</option>
    </select>
    </p>
    <p><button type="button" onclick="AddOption();">add option</button></p>
    </form>
    </body>
    </html>

  8. #8
    Join Date
    Sep 2004
    Posts
    5
    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".

  9. #9
    Join Date
    Jun 2005
    Posts
    1
    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!

  10. #10
    Join Date
    Sep 2004
    Posts
    5
    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.

  11. #11
    Join Date
    Oct 2012
    Posts
    1
    for IE use something like this:
    <HTML><HEAD>
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    </HEAD>

    Quote Originally Posted by sruggero View Post
    I have tried both solutions suggested by Fang and Janaka. This just doesn't work. I'm using IE6 browser.

    Any other ideas?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles