Dynamic Select List Contents

Discussion in 'Javascript' started by mike, Jan 19, 2006.

  1. mike

    mike Guest

    I have a select list defined like:

    <select name="cri2" multiple style="height:220px; width:300px;"
    onClick="show_content(this);">
    </select>

    I add content to it dynamically using a function like:

    function addOption(theSel, theText, theValue, optionColor)
    {
    var newOpt = new Option(theText, theValue);
    var selLength = theSel.length;
    theSel.options[selLength] = newOpt;
    theSel.options[selLength].style.color = optionColor;
    }

    Sometimes the text content is so large that I need the user to be able
    to see it using the onclick event in the select like:

    function show_content(obj)
    {
    //this did not work i got an error about the object not
    supporting this property or method
    //alert(obj.options[obj.selectedIndex].value);
    for ( var i=0; i<obj.length; i++ )
    {
    if (obj.selected){alert(obj.value);break;}
    }
    }

    The pointer seems all screwed up. the first time i click on it i get
    nothing. then the next time i get the alert. If there are 3 items the
    alert is for the last item i clicked on.

    Any help is appreciated.

    Mike
     
    mike, Jan 19, 2006
    #1
    1. Advertising

  2. mike

    RobG Guest

    mike wrote:
    > I have a select list defined like:
    >
    > <select name="cri2" multiple style="height:220px; width:300px;"
    > onClick="show_content(this);">
    > </select>


    IE fires the onclick event before it sets the option to selected, so you
    don't get the one that was just clicked on. I think it expects that
    the first click is on the drop-down arrow not one of the options.


    >
    > I add content to it dynamically using a function like:
    >
    > function addOption(theSel, theText, theValue, optionColor)
    > {
    > var newOpt = new Option(theText, theValue);
    > var selLength = theSel.length;
    > theSel.options[selLength] = newOpt;


    theSel.options[theSel.options.length] = newOpt;

    Remove the 'var selLength = ...' line.


    > theSel.options[selLength].style.color = optionColor;


    Test for support for the style object, you already have a reference to
    the option, why get it again?

    if (newOpt.style) {
    newOpt.style.color = optionColor;
    }

    > }
    >
    > Sometimes the text content is so large that I need the user to be able
    > to see it using the onclick event in the select like:
    >
    > function show_content(obj)
    > {
    > //this did not work i got an error about the object not
    > supporting this property or method
    > //alert(obj.options[obj.selectedIndex].value);
    > for ( var i=0; i<obj.length; i++ )
    > {
    > if (obj.selected){alert(obj.value);break;}
    > }
    > }


    Once the wrapping error from your comment is removed, it 'works' for me.
    A more efficient routine is:

    function show_content(obj)
    {
    var op, s = [];
    for (var i=0, len=obj.options.length; i<len; ++i) {
    op = obj.options;
    if (op.selected) s[s.length] = op.text;
    }
    alert(s.join('\n'));
    }


    Here's a working example:

    <script type="text/javascript">

    function addOption(theSel, theText, theValue, optionColor)
    {
    var newOpt = new Option(theText + '-' + theSel.length,
    theValue + '-' + theSel.length);
    theSel.options[theSel.options.length] = newOpt;
    newOpt.style && (newOpt.style.color = optionColor);
    }

    function show_content(obj)
    {
    var op, s = [];
    for (var i=0, len=obj.options.length; i<len; ++i)
    {
    op = obj.options;
    if (op.selected) s[s.length] = op.text;
    }
    alert(s.join('\n'));
    }

    </script>

    <input type="button" value="Add one"
    onclick="addOption(document.getElementById('cri2'),
    'theText', 'theValue', 'red')">

    <select name="cri2" id="cri2"
    multiple style="height:220px; width:300px;"
    onchange="show_content(this);">
    </select>


    [...]


    --
    Rob
     
    RobG, Jan 20, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Don Adams
    Replies:
    1
    Views:
    624
    Martin Honnen
    Mar 5, 2004
  2. Kamarulnizam Rahim
    Replies:
    4
    Views:
    246
    Robert Klemme
    Jan 28, 2011
  3. Dan Thomas
    Replies:
    0
    Views:
    295
    Dan Thomas
    Feb 2, 2011
  4. palmiere
    Replies:
    1
    Views:
    465
    Erwin Moller
    Feb 9, 2004
  5. Replies:
    0
    Views:
    217
Loading...

Share This Page