InnerHTML drops leading tag in SELECT

[mjpdatadev]

I am relatively new to XMLRequest, DOM and Ajax but I really like the
functionality. I have the DIV and SPAN changes working well but I
thought that I would experiment with changing the actual innerHTML of
each control rather than changing the whole control inside of a DIV.

What I tried was this:
Create a <SELECT> so...

<SELECT id=MyComboBox>
<OPTION>opt1</OPTION>
<OPTION>opt2</OPTION>
<OPTION>opt3</OPTION>
</SELECT>

I then tried to change the innerHTML of just "MyComboBox" but when I
view the resulting string that is supposed to populate the SELECT it
is always missing the first <OPTION> tag. In other words, the string
is supposed to look like this:
strFill = "<OPTION>new1</OPTION><OPTION>new2</OPTION><OPTION>new3</
OPTION>"

....but, instead, it looks like this:
strFill = "new1</OPTION><OPTION>new2</OPTION><OPTION>new3</OPTION>"

I even tried forcing a leading string on the beginning like this...
strResult = "<OPTION>" + strFill;
but it still strips off the leading OPTION tag when I pop the SELECT
(ie. MyComboBox.innerHTML = strResult
I checked the innerText property of the result and it looks fine.

Is there something that I am missing or is there an easier way to do
this?
Anyway, until I hear from someone, I guess that it is back to the DIV/
SPAN thing.

Thanks for the help.
Mark

 

[=?ISO-8859-1?Q?G=F6ran_Andersson?=]

I am relatively new to XMLRequest, DOM and Ajax but I really like the
functionality. I have the DIV and SPAN changes working well but I
thought that I would experiment with changing the actual innerHTML of
each control rather than changing the whole control inside of a DIV.

What I tried was this:
Create a <SELECT> so...

<SELECT id=MyComboBox>
<OPTION>opt1</OPTION>
<OPTION>opt2</OPTION>
<OPTION>opt3</OPTION>
</SELECT>

I then tried to change the innerHTML of just "MyComboBox" but when I
view the resulting string that is supposed to populate the SELECT it
is always missing the first <OPTION> tag. In other words, the string
is supposed to look like this:
strFill = "<OPTION>new1</OPTION><OPTION>new2</OPTION><OPTION>new3</
OPTION>"

...but, instead, it looks like this:
strFill = "new1</OPTION><OPTION>new2</OPTION><OPTION>new3</OPTION>"

I even tried forcing a leading string on the beginning like this...
strResult = "<OPTION>" + strFill;
but it still strips off the leading OPTION tag when I pop the SELECT
(ie. MyComboBox.innerHTML = strResult
I checked the innerText property of the result and it looks fine.

Is there something that I am missing or is there an easier way to do
this?
Anyway, until I hear from someone, I guess that it is back to the DIV/
SPAN thing.

Thanks for the help.
Mark

The select element has an options collection that contains all the
options. Use that to manipulate the options instead.

 

[mjpdatadev]

The select element has an options collection that contains all the
options. Use that to manipulate the options instead.

Thanks for the quick reply!
I am trying to keep my javascript to a minimum in order to keep my
pages lightweight. I am mostly using the Jscript for events and Ajax.
I am using ASP.Net (C# scripting) objects on the backend to grab my
data and then populate the controls using the TextWriter classes to
send the HTML back to my pages.
ex:
StringWriter wr = new StringWriter();
HtmlTextWriter writer = new HtmlTextWriter(wr);
I have not tried your method (but I have thought about it) but my fear
is that the same thing will happen because I will populate the C#
object (my SELECT control) and then send the just the HTML back to the
page. So, there is really no difference. I will try it but I do not
think that it will make a difference.
Any other thoughts?

Thanks again,
Mark

 

[Mark Rae]

Thanks for the quick reply!
I am trying to keep my javascript to a minimum in order to keep my
pages lightweight. I am mostly using the Jscript for events and Ajax.
I am using ASP.Net (C# scripting) objects on the backend to grab my
data and then populate the controls using the TextWriter classes to
send the HTML back to my pages.
ex:
StringWriter wr = new StringWriter();
HtmlTextWriter writer = new HtmlTextWriter(wr);

Wow! I think you're really making life difficult for yourself!

There's almost never any need to actually write out the HTML markup,
especially for webcontrols...

If the data required to populate your DropDownList is being fetched from a
database, you can simply bind it:

MyDDL.DataSource = <fetch dataset from database>;
MyDDL.DataValueField = "<column from dataset>";
MyDDL.DataTextField = "<column from dataset>";
MyDDL.DataBind();

If not, you can add the select options like this:

MyDDL.Items.Add(new ListItem("OPTION1", "1"));
MyDDL.Items.Add(new ListItem("OPTION2", "2"));
MyDDL.Items.Add(new ListItem("OPTION3", "3"));

 

[mjpdatadev]

Wow! I think you're really making life difficult for yourself!

There's almost never any need to actually write out the HTML markup,
especially for webcontrols...

If the data required to populate your DropDownList is being fetched from a
database, you can simply bind it:

MyDDL.DataSource = <fetch dataset from database>;
MyDDL.DataValueField = "<column from dataset>";
MyDDL.DataTextField = "<column from dataset>";
MyDDL.DataBind();

If not, you can add the select options like this:

MyDDL.Items.Add(new ListItem("OPTION1", "1"));
MyDDL.Items.Add(new ListItem("OPTION2", "2"));
MyDDL.Items.Add(new ListItem("OPTION3", "3"));

Yes. That is exactly what I am doing. Sorry, I was try to be brief in
my prior description. But, I only want to update the values (aka
<OPTION> tags) *within* the control, not the entire DIV. Therefore, I
only want to update the internal markup (hence innerHTML) for the
control. I am using the method you are describing above but that
resulting .aspx (or asmx, whichever the case) will update the entire
control within the DIV on my webpage which forces me to resend my
jscript events for the control (ie. onclick=ValidateText() everytime
I update the control.

Maybe I am missing something. Again, I am relatively new to this.

Thanks for the patience.

Mark

 

[Mark Rae]

Yes. That is exactly what I am doing. Sorry, I was try to be brief in
my prior description. But, I only want to update the values (aka
<OPTION> tags) *within* the control, not the entire DIV. Therefore, I
only want to update the internal markup (hence innerHTML) for the
control. I am using the method you are describing above but that
resulting .aspx (or asmx, whichever the case) will update the entire
control within the DIV on my webpage which forces me to resend my
jscript events for the control (ie. onclick=ValidateText() everytime
I update the control.

Maybe I am missing something. Again, I am relatively new to this.

Hmm - do you mean you want to update only a part of the page in isolation
without having to post the entire page back to the server...?

In which case, you need AJAX, as that is precisely the reason for which it
was developed...

Incidentally, since you say you're new to ASP.NET, you might find AJAX a bit
daunting...

In which case, you might prefer to use a relatively lightweight AJAX
wrapper: http://anthemdotnet.com/

 

[mjpdatadev]

That's pretty funny.
Did you read my first post?

Mark

 

[Mark Rae]

Did you read my first post?

Not well enough, it seems...

No doubt you've solved your problem now anyway...

 

[Guest]

Hi,

Incase you are trying to alter the content of your select control in
javascript, you could try this option. Its not the innerHTML that needs to be
set, but its the other html.
<select id="myCombo" >
<option>opt1</option>
<option>opt2</option>
<option>opt3</option>
</select>

To replace the options inside the myCombo select control:

document.getElementById('myCombo').outerHTML = "<select id='myCombo'>

<option>opt4</option>

<option>opt5</option>

<option>opt6</option>

</select>";


I think this shd help.

-Parvathy Padmanabhan

 

[mjpdatadev]

Unfortunately, I did not solve my problem but I am not sure that it is
possible.

Thanks for trying though.

 

[=?ISO-8859-1?Q?G=F6ran_Andersson?=]

Thanks for the quick reply!
I am trying to keep my javascript to a minimum in order to keep my
pages lightweight. I am mostly using the Jscript for events and Ajax.
I am using ASP.Net (C# scripting) objects on the backend to grab my
data and then populate the controls using the TextWriter classes to
send the HTML back to my pages.
ex:
StringWriter wr = new StringWriter();
HtmlTextWriter writer = new HtmlTextWriter(wr);
I have not tried your method (but I have thought about it) but my fear
is that the same thing will happen because I will populate the C#
object (my SELECT control) and then send the just the HTML back to the
page. So, there is really no difference. I will try it but I do not
think that it will make a difference.
Any other thoughts?

Thanks again,
Mark

It's obvious that you haven't tried the method I suggested, as you are
saying that it won't make any difference.

The problem with using innerHTML to replace the elements inside the
select tag, is that there aren't really any elements inside the tag. The
<option> tags get parsed to Option objects that are placed in the
objects collection of the select element.

To add an option to the collection, for example, just create an Option
object and add to the collection:

var o = document.createElement('option');
o.text = 'Select me';
o.value = '42';
document.getElementById('MyComboBox').options.Add(o);