Dropdownlist change selection on client

[harold.gimenez]

Hi group,

I am trying to change the selection of an ASP Dropdownlist just like
"Orange" is selected here:

http://www.w3schools.com/js/tryit.as...ption_selected

The following works fine on IE:

document.getEle mentById('dropd own').options.s elected = 0 //
selects the first option

But, I need this to work on other browsers as well.

I started by adding the "id" attribute to the ASP:ListItem in order to
access them by their ID (like in the W3C example above), but it does
not get rendered in the produced HTML page.

How could I achieve this in a crossbrowser, standard way?

Thanks.

[Masudur]

On May 26, 7:04 am, harold.gime...@ gmail.com wrote:

Hi group,

I am trying to change the selection of an ASP Dropdownlist just like
"Orange" is selected here:

http://www.w3schools.com/js/tryit.as...ption_selected

The following works fine on IE:

document.getEle mentById('dropd own').options.s elected = 0 //
selects the first option

But, I need this to work on other browsers as well.

I started by adding the "id" attribute to the ASP:ListItem in order to
access them by their ID (like in the W3C example above), but it does
not get rendered in the produced HTML page.

How could I achieve this in a crossbrowser, standard way?

Thanks.

Hi,

Please check this link ... in this blog post i have dropped few lines
which might help you
http://munnacs.blogspot.com/2007/05/...ml-select.html

Thanks
Masudur

[harold.gimenez]

On May 26, 12:41 am, Masudur <munn...@gmail. comwrote:

On May 26, 7:04 am, harold.gime...@ gmail.com wrote:

Hi group,

I am trying to change the selection of an ASP Dropdownlist just like
"Orange" is selected here:

http://www.w3schools.com/js/tryit.as...ption_selected

The following works fine on IE:

document.getEle mentById('dropd own').options.s elected = 0 //
selects the first option

But, I need this to work on other browsers as well.

I started by adding the "id" attribute to the ASP:ListItem in order to
access them by their ID (like in the W3C example above), but it does
not get rendered in the produced HTML page.

How could I achieve this in a crossbrowser, standard way?

Thanks.

Hi,

Please check this link ... in this blog post i have dropped few lines
which might help youhttp://munnacs.blogspo t.com/2007/05/select-items-of-html-select.html

Thanks
Masudur

Thanks for your reply.

The other thing I tried from your blog did not really work out either:

document.getEle mentById('dropd own').value = "1";

or

document.getEle mentById('dropd own').options[1].selected = true;
These two work on IE7 but not Firefox.

I guess the bottom line is: is there a way to assign id s to the list
elements in order for me to access them with getElementById( 'option1')
on Firefox? Maybe there is a way on the code behind to add this
attribute...

I am using .NET Framework 1.1...

Thanks again.

[Alexey Smirnov]

On May 26, 6:20 pm, harold.gime...@ gmail.com wrote:

document.getEle mentById('dropd own').options.s elected = 0 //
selects the first option

document.getEle mentById('dropd own').selectedI ndex = 0

should help.

[harold.gimenez]

On May 26, 1:50 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On May 26, 6:20 pm, harold.gime...@ gmail.com wrote:

document.getEle mentById('dropd own').options.s elected = 0 //
selects the first option

document.getEle mentById('dropd own').selectedI ndex = 0

should help.

Unfortunately it didn't work on Firefox either. Also works fine on IE.
Thanks, though...

[Alexey Smirnov]

On May 27, 9:39 pm, harold.gime...@ gmail.com wrote:

On May 26, 1:50 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On May 26, 6:20 pm, harold.gime...@ gmail.com wrote:

document.getEle mentById('dropd own').options.s elected = 0 //
selects the first option

document.getEle mentById('dropd own').selectedI ndex = 0

should help.

Unfortunately it didn't work on Firefox either. Also works fine on IE.
Thanks, though...

It does work. I've tested in FF 2.0

Can you give me the full code of your script, please?

[harold.gimenez]

On May 27, 3:54 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On May 27, 9:39 pm, harold.gime...@ gmail.com wrote:

On May 26, 1:50 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On May 26, 6:20 pm, harold.gime...@ gmail.com wrote:

document.getEle mentById('dropd own').options.s elected = 0 //
selects the first option

document.getEle mentById('dropd own').selectedI ndex = 0

should help.

Unfortunately it didn't work on Firefox either. Also works fine on IE.
Thanks, though...

It does work. I've tested in FF 2.0

Can you give me the full code of your script, please?

Sure. Basically it looks for text in the txtField, and decides what to
select on the dropdownlist depending on empty string or not...

Here is the javascript function which executes on the onchange event
of the txtField...

function setStatus() {
DropDown = document.getEle mentById('Dropd ownlist');
text= document.getEle mentById('txtFi eld');
if (text.value != "") {
DropDown.select edIndex = 1;
DropDown.disabl ed = true;
} else {
DropDown.disabl ed = false;
}
}

Below is the asp part:

<asp:textbox id="txtField" runat="server" onchange="setSt atus()">

<ASP:DROPDOWNLI ST id="Dropdownlis t" runat="server" >
<ASP:ListItem Value="1">Activ e</ASP:ListItem>
<ASP:ListItem Value="2">Inact ive</ASP:ListItem>
</ASP:DROPDOWNLIS T>

Thanks!

[Alexey Smirnov]

On May 28, 4:27 am, harold.gime...@ gmail.com wrote:

On May 27, 3:54 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On May 27, 9:39 pm, harold.gime...@ gmail.com wrote:

On May 26, 1:50 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On May 26, 6:20 pm, harold.gime...@ gmail.com wrote:

document.getEle mentById('dropd own').options.s elected = 0 //
selects the first option

document.getEle mentById('dropd own').selectedI ndex = 0

should help.

Unfortunately it didn't work on Firefox either. Also works fine on IE.
Thanks, though...

It does work. I've tested in FF 2.0

Can you give me the full code of your script, please?

Sure. Basically it looks for text in the txtField, and decides what to
select on the dropdownlist depending on empty string or not...

Here is the javascript function which executes on the onchange event
of the txtField...

Hello Harald,

your code is working on my box in IE7, and FF2. It does change an item
in 'Dropdownlist' on onchange event.

Here's my test code (basically, a copy of your code)

<%@ Page Language="VB" %>
<script runat=server>
Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArg s)
Handles Me.Load
If Page.IsPostBack Then
response.write( "SelectedValue= " &
Dropdownlist.Se lectedValue)
End If
End Sub
</script>
<html>
<head runat="server">
<title></title>
<script>
function setStatus() {
DropDown = document.getEle mentById('Dropd ownlist');
text= document.getEle mentById('txtFi eld');
if (text.value != "") {
DropDown.select edIndex = 1;
//DropDown.disabl ed = true;
} else {
DropDown.select edIndex = 0;
//DropDown.disabl ed = false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:textbox id="txtField" runat="server"
onchange="setSt atus()" />
<ASP:DROPDOWNLI ST id="Dropdownlis t" runat="server" >
<ASP:ListItem Value="1">Activ e</ASP:ListItem>
<ASP:ListItem Value="2">Inact ive</ASP:ListItem>
</ASP:DROPDOWNLIS T>
<asp:Button ID="Button1" runat="server" Text="PostBack" />
</form>
</body>
</html>

In FireFox I see the same behavior, once text is changed and focus is
changed to other control it executes the setStatus() function. When
the button is clicked you will see that the code behind also get the
right value of the control.

Thoughts?

Alexey

[harold.gimenez]

On May 28, 3:30 am, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On May 28, 4:27 am, harold.gime...@ gmail.com wrote:

On May 27, 3:54 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On May 27, 9:39 pm, harold.gime...@ gmail.com wrote:

On May 26, 1:50 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On May 26, 6:20 pm, harold.gime...@ gmail.com wrote:

document.getEle mentById('dropd own').options.s elected = 0 //
selects the first option

document.getEle mentById('dropd own').selectedI ndex = 0

should help.

Unfortunately it didn't work on Firefox either. Also works fine on IE.
Thanks, though...

It does work. I've tested in FF 2.0

Can you give me the full code of your script, please?

Sure. Basically it looks for text in the txtField, and decides what to
select on the dropdownlist depending on empty string or not...

Here is the javascript function which executes on the onchange event
of the txtField...

Hello Harald,

your code is working on my box in IE7, and FF2. It does change an item
in 'Dropdownlist' on onchange event.

Here's my test code (basically, a copy of your code)

<%@ Page Language="VB" %>
<script runat=server>
Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArg s)
Handles Me.Load
If Page.IsPostBack Then
response.write( "SelectedValue= " &
Dropdownlist.Se lectedValue)
End If
End Sub
</script>
<html>
<head runat="server">
<title></title>
<script>
function setStatus() {
DropDown = document.getEle mentById('Dropd ownlist');
text= document.getEle mentById('txtFi eld');
if (text.value != "") {
DropDown.select edIndex = 1;
//DropDown.disabl ed = true;
} else {
DropDown.select edIndex = 0;
//DropDown.disabl ed = false;
}}

</script>
</head>
<body>
<form id="form1" runat="server">
<asp:textbox id="txtField" runat="server"
onchange="setSt atus()" />
<ASP:DROPDOWNLI ST id="Dropdownlis t" runat="server" >
<ASP:ListItem Value="1">Activ e</ASP:ListItem>
<ASP:ListItem Value="2">Inact ive</ASP:ListItem>
</ASP:DROPDOWNLIS T>
<asp:Button ID="Button1" runat="server" Text="PostBack" />
</form>
</body>
</html>

In FireFox I see the same behavior, once text is changed and focus is
changed to other control it executes the setStatus() function. When
the button is clicked you will see that the code behind also get the
right value of the control.

Thoughts?

Alexey

Thanks for that. I helped me identify the issue. The txtField is
actually populated via an RJS Pop Calendar control. Something is
conflicting with the onchange event handler on the txtField and other
code from the pop calendar - BUT, only in FF, which is bizarre to say
the least. The onchange event is not handled by the pop calendar, so
there should be no conflict at all.

I've identified the problem, but still no real solution. I need the
pop calendar since the txtField is supposed to receive a date and I
need to be consistent with the rest of the date input fields...

Alexey, thanks for your help.

-Harold

[Alexey Smirnov]

On May 28, 7:49 pm, harold.gime...@ gmail.com wrote:

Thanks for that. I helped me identify the issue. The txtField is
actually populated via an RJS Pop Calendar control. Something is
conflicting with the onchange event handler on the txtField and other
code from the pop calendar - BUT, only in FF, which is bizarre to say
the least. The onchange event is not handled by the pop calendar, so
there should be no conflict at all.

I've identified the problem, but still no real solution. I need the
pop calendar since the txtField is supposed to receive a date and I
need to be consistent with the rest of the date input fields...

Alexey, thanks for your help.

-Harold- Hide quoted text -

- Show quoted text -

I would suggest to install the Web Developer extension for FF, you
will be able to check js-errors.