Dropdownlist change selection on client

H

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.
 
M

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
 
H

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.
 
H

harold.gimenez

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

should help.

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

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?
 
H

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()">

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

Thanks!
 
G

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()" />
<ASP:DROPDOWNLIST id="Dropdownlist" runat="server" >
<ASP:ListItem Value="1">Active</ASP:ListItem>
<ASP:ListItem Value="2">Inactive</ASP:ListItem>
</ASP:DROPDOWNLIST>
<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
 
H

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()" />
<ASP:DROPDOWNLIST id="Dropdownlist" runat="server" >
<ASP:ListItem Value="1">Active</ASP:ListItem>
<ASP:ListItem Value="2">Inactive</ASP:ListItem>
</ASP:DROPDOWNLIST>
<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
 
G

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.
 
H

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)
 
H

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='cursor:pointer;'><img src='/PopCalendar/Calendar.gif'
border='0' align='absmiddle' /></span>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,832
Latest member
GlennSmall

Latest Threads

Top