Changing text in selectbox

Discussion in 'Javascript' started by shankwheat, Nov 9, 2006.

  1. shankwheat

    shankwheat Guest

    I'm passing a string like 'Div3,Div4' to use as options in a selectbox
    but I need the text the user sees in the box different from the values.
    My code populates the values in the selectbox correctly but not the
    text. Thanks

    Desired end result:

    <select id="selectBox" multiple="multiple" size="4">
    <option value="Div3">About the Company</option>
    <option value="Div1">Ratings</option>
    </select>

    I tried this but it's not working. No errors

    optionsString = "Div3,Div1";
    optionsArray = optionsString.split(",");
    var sb = document.getElementById("selectBox");
    for (i=0; i < optionsArray.length; i++) {
    var opt = document.createElement("OPTION");
    opt.setAttribute("value",optionsArray);

    var commonName = optionsArray;
    if (commonName == "Div1") {
    opt.setAttribute("text","Ratings");
    } else if (commonName == "Div3") {
    opt.setAttribute("text","About the Company");
    }
    opt.appendChild(document.createTextNode(optionsArray ));
    sb.appendChild(opt);
    }
    }
    shankwheat, Nov 9, 2006
    #1
    1. Advertising

  2. shankwheat

    RobG Guest

    shankwheat wrote:
    > I'm passing a string like 'Div3,Div4' to use as options in a selectbox
    > but I need the text the user sees in the box different from the values.
    > My code populates the values in the selectbox correctly but not the
    > text. Thanks


    IE is buggy in this regard. Use either:

    select.option=new Option(text[,value[,defaultSelected[,selected]]])

    where defaultSelected and selected are booleans. This method is widely
    used because not only is it convenient, but it works everywhere (AFAIK)
    and you only need to include the parameters you want - typically just
    text and value.

    If you want to stick with createElement, add the option text by
    appending a text node set to the required value, e.g.

    var opt = document.createElement('option');
    opt.value = 'some value';
    opt.appendChild(document.createTextNode('some text'));

    --
    Rob
    RobG, Nov 9, 2006
    #2
    1. Advertising

  3. shankwheat

    shankwheat Guest

    Thanks. I've chamged things around to use your suggested the
    select.option=new Option(text[,value[,defaultSelected[,selected]]])
    method but the text value for the options isn't appear in the
    selectbox, just the values. Thanks

    optionsString = "Div3,Div1";
    optionsArray = optionsString.split(",");
    var sb = document.getElementById("selectBox");
    for (i=0; i < optionsArray.length; i++) {

    var commonName = optionsArray;
    if (commonName = "Div1") {
    var text = "Ratings";
    } else if (commonName = "Div3") {
    var text = "About the Company";
    }

    sb.options = new Option(optionsArray,text);
    }
    }



    RobG wrote:
    > shankwheat wrote:
    > > I'm passing a string like 'Div3,Div4' to use as options in a selectbox
    > > but I need the text the user sees in the box different from the values.
    > > My code populates the values in the selectbox correctly but not the
    > > text. Thanks

    >
    > IE is buggy in this regard. Use either:
    >
    > select.option=new Option(text[,value[,defaultSelected[,selected]]])
    >
    > where defaultSelected and selected are booleans. This method is widely
    > used because not only is it convenient, but it works everywhere (AFAIK)
    > and you only need to include the parameters you want - typically just
    > text and value.
    >
    > If you want to stick with createElement, add the option text by
    > appending a text node set to the required value, e.g.
    >
    > var opt = document.createElement('option');
    > opt.value = 'some value';
    > opt.appendChild(document.createTextNode('some text'));
    >
    > --
    > Rob
    shankwheat, Nov 9, 2006
    #3
  4. shankwheat

    shankwheat Guest

    I've changed this around again because I found this method the easiest
    to follow. However, the text value for both options in the selectbox
    is "Ratings" and the first one should be "About the Company" and the
    second one "Ratings". I think I'm just messing up the DivValue
    assignment.

    optionsString = "Div3,Div1";
    optionsArray = optionsString.split(",");
    for (i=0; i < optionsArray.length; i++)
    {

    NewOpt = new Option;
    NewOpt.value = optionsArray;
    var DivValue = optionsArray;
    alert(DivValue);
    if (DivValue = "Div1")
    {
    var optionText = "Ratings";
    }
    else if (DivValue = "Div3")
    {
    var optionText = "About the Company";
    }

    NewOpt.text = optionText;
    document.form1.selectBox.options = NewOpt;



    shankwheat wrote:
    > Thanks. I've chamged things around to use your suggested the
    > select.option=new Option(text[,value[,defaultSelected[,selected]]])
    > method but the text value for the options isn't appear in the
    > selectbox, just the values. Thanks
    >
    > optionsString = "Div3,Div1";
    > optionsArray = optionsString.split(",");
    > var sb = document.getElementById("selectBox");
    > for (i=0; i < optionsArray.length; i++) {
    >
    > var commonName = optionsArray;
    > if (commonName = "Div1") {
    > var text = "Ratings";
    > } else if (commonName = "Div3") {
    > var text = "About the Company";
    > }
    >
    > sb.options = new Option(optionsArray,text);
    > }
    > }
    >
    >
    >
    > RobG wrote:
    > > shankwheat wrote:
    > > > I'm passing a string like 'Div3,Div4' to use as options in a selectbox
    > > > but I need the text the user sees in the box different from the values.
    > > > My code populates the values in the selectbox correctly but not the
    > > > text. Thanks

    > >
    > > IE is buggy in this regard. Use either:
    > >
    > > select.option=new Option(text[,value[,defaultSelected[,selected]]])
    > >
    > > where defaultSelected and selected are booleans. This method is widely
    > > used because not only is it convenient, but it works everywhere (AFAIK)
    > > and you only need to include the parameters you want - typically just
    > > text and value.
    > >
    > > If you want to stick with createElement, add the option text by
    > > appending a text node set to the required value, e.g.
    > >
    > > var opt = document.createElement('option');
    > > opt.value = 'some value';
    > > opt.appendChild(document.createTextNode('some text'));
    > >
    > > --
    > > Rob
    shankwheat, Nov 9, 2006
    #4
  5. shankwheat

    mick white Guest

    shankwheat wrote:

    > I've changed this around again because I found this method the easiest
    > to follow. However, the text value for both options in the selectbox
    > is "Ratings" and the first one should be "About the Company" and the
    > second one "Ratings". I think I'm just messing up the DivValue
    > assignment.


    See below:

    >
    > optionsString = ;
    > optionsArray = optionsString.split(",");


    //optionsArray = ["Div3,Div1"]

    > for (i=0; i < optionsArray.length; i++)


    //You seem to be declaring a global variable of "i", this may be a problem

    > {
    >
    > NewOpt = new Option;
    > NewOpt.value = optionsArray;
    > var DivValue = optionsArray;
    > alert(DivValue);
    > if (DivValue = "Div1")


    //if (DivValue == "Div1")
    // or better yet:
    //if ( "Div1"==optionsArray)
    //
    Mick


    {
    > var optionText = "Ratings";
    > }
    > else if (DivValue = "Div3")


    //if (DivValue == "Div3")

    > {
    > var optionText = "About the Company";
    > }





    >
    > NewOpt.text = optionText;
    > document.form1.selectBox.options = NewOpt;

    [snip]
    mick white, Nov 9, 2006
    #5
    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. Matthew
    Replies:
    3
    Views:
    3,766
    Natty Gur
    Aug 6, 2003
  2. Replies:
    2
    Views:
    2,176
    Mark Parnell
    Aug 24, 2004
  3. Bodidily
    Replies:
    0
    Views:
    441
    Bodidily
    Aug 25, 2004
  4. shankwheat

    Changing Value of a Selectbox

    shankwheat, Jun 22, 2006, in forum: Javascript
    Replies:
    1
    Views:
    76
    Jeremy
    Jun 22, 2006
  5. shankwheat
    Replies:
    2
    Views:
    119
Loading...

Share This Page