469,292 Members | 1,310 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,292 developers. It's quick & easy.

Changing text in selectbox

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[i]);

var commonName = optionsArray[i];
if (commonName == "Div1") {
opt.setAttribute("text","Ratings");
} else if (commonName == "Div3") {
opt.setAttribute("text","About the Company");
}
opt.appendChild(document.createTextNode(optionsArr ay [i]));
sb.appendChild(opt);
}
}

Nov 9 '06 #1
4 1571
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[i]=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

Nov 9 '06 #2
Thanks. I've chamged things around to use your suggested the
select.option[i]=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[i];
if (commonName = "Div1") {
var text = "Ratings";
} else if (commonName = "Div3") {
var text = "About the Company";
}

sb.options[i] = new Option(optionsArray[i],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[i]=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
Nov 9 '06 #3
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[i];
var DivValue = optionsArray[i];
alert(DivValue);
if (DivValue = "Div1")
{
var optionText = "Ratings";
}
else if (DivValue = "Div3")
{
var optionText = "About the Company";
}

NewOpt.text = optionText;
document.form1.selectBox.options[i] = NewOpt;

shankwheat wrote:
Thanks. I've chamged things around to use your suggested the
select.option[i]=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[i];
if (commonName = "Div1") {
var text = "Ratings";
} else if (commonName = "Div3") {
var text = "About the Company";
}

sb.options[i] = new Option(optionsArray[i],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[i]=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
Nov 9 '06 #4
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[i];
var DivValue = optionsArray[i];
alert(DivValue);
if (DivValue = "Div1")
//if (DivValue == "Div1")
// or better yet:
//if ( "Div1"==optionsArray[i])
//
Mick
{
var optionText = "Ratings";
}
else if (DivValue = "Div3")
//if (DivValue == "Div3")
{
var optionText = "About the Company";
}


>
NewOpt.text = optionText;
document.form1.selectBox.options[i] = NewOpt;
[snip]
Nov 9 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Tole | last post: by
7 posts views Thread by Erwin Moller | last post: by
3 posts views Thread by Stefan Richter | last post: by
4 posts views Thread by Robert Bravery | last post: by
1 post views Thread by shankwheat | last post: by
1 post views Thread by giloosh | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.