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.asp?filename=try_dom_option_selected

The following works fine on IE:

document.getElementById('dropdown').options.selected = 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]

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.asp?filename=try_dom_option_selected

The following works fine on IE:

document.getElementById('dropdown').options.selected = 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/select-items-of-html-select.html

Thanks
Masudur

 

[harold.gimenez]

Hi,

Please check this link ... in this blog post i have dropped few lines
which might help youhttp://munnacs.blogspot.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.getElementById('dropdown').value = "1";

or

document.getElementById('dropdown').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.

 

[Guest]

document.getElementById('dropdown').options.selected = 0 //
selects the first option

document.getElementById('dropdown').selectedIndex = 0

should help.

 

[harold.gimenez]

document.getElementById('dropdown').selectedIndex = 0

should help.

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

 

[Guest]

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]

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.getElementById('Dropdownlist');
text= document.getElementById('txtField');
if (text.value != "") {
DropDown.selectedIndex = 1;
DropDown.disabled = true;
} else {
DropDown.disabled = false;
}
}

Below is the asp part:

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

<ASPROPDOWNLIST id="Dropdownlist" runat="server" >
<ASP:ListItem Value="1">Active</ASP:ListItem>
<ASP:ListItem Value="2">Inactive</ASP:ListItem>
</ASPROPDOWNLIST>

Thanks!

 

[Guest]

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.EventArgs)
Handles Me.Load
If Page.IsPostBack Then
response.write("SelectedValue=" &
Dropdownlist.SelectedValue)
End If
End Sub
</script>
<html>
<head runat="server">
<title></title>
<script>
function setStatus() {
DropDown = document.getElementById('Dropdownlist');
text= document.getElementById('txtField');
if (text.value != "") {
DropDown.selectedIndex = 1;
//DropDown.disabled = true;
} else {
DropDown.selectedIndex = 0;
//DropDown.disabled = false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:textbox id="txtField" runat="server"
onchange="setStatus()" />
<ASPROPDOWNLIST id="Dropdownlist" runat="server" >
<ASP:ListItem Value="1">Active</ASP:ListItem>
<ASP:ListItem Value="2">Inactive</ASP:ListItem>
</ASPROPDOWNLIST>
<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]

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.EventArgs)
Handles Me.Load
If Page.IsPostBack Then
response.write("SelectedValue=" &
Dropdownlist.SelectedValue)
End If
End Sub
</script>
<html>
<head runat="server">
<title></title>
<script>
function setStatus() {
DropDown = document.getElementById('Dropdownlist');
text= document.getElementById('txtField');
if (text.value != "") {
DropDown.selectedIndex = 1;
//DropDown.disabled = true;
} else {
DropDown.selectedIndex = 0;
//DropDown.disabled = false;
}}

</script>
</head>
<body>
<form id="form1" runat="server">
<asp:textbox id="txtField" runat="server"
onchange="setStatus()" />
<ASPROPDOWNLIST id="Dropdownlist" runat="server" >
<ASP:ListItem Value="1">Active</ASP:ListItem>
<ASP:ListItem Value="2">Inactive</ASP:ListItem>
</ASPROPDOWNLIST>
<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

 

[Guest]

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.

 

[harold.gimenez]

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

I do have it installed... little green checkmark icon constantly while
looking at this page - no errors, but the event never fires either.

confused :-o)

 

[harold.gimenez]

I do have it installed... little green checkmark icon constantly while
looking at this page - no errors, but the event never fires either.

confused :-o)

More behaviour observations:

* The event does fire on Firefox when I type in a date to the text
field.
* The event does fire on Firefox when I copy a date and paste it on
the text field.
* The event does NOT fire on Firefox when I select a date on the Pop
Calendar control which populates the text field -> this is what user
will do most of the time.

This is what the txtField input looks like rendered on firefox:

<input name="txtField" type="text" id="txtField" autocomplete="off"
Format="mm/dd/yyyy" onfocus="__PopCalSetFocus(this, event);"
onblur="__PopCalSetBlur(this, event);" onchange="setStatus()"
onkeydown="__PopCalValidateKey(this, event);" dir="ltr"
InvalidDateMessage="Invalid Date" Calendar="PopcalendarDate" />

And the pop calender control:

<span id='PopcalendarDate_Control'
onclick='__PopCalShowCalendar("txtField",this)'
style='cursorointer;'><img src='/PopCalendar/Calendar.gif'
border='0' align='absmiddle' /></span>