Home » Asp.net

asp dropdown - onchange="javascript: select_country(this.options[this.selectedIndex].text);"

With a regular form drop-down box I can use the onchange event to fire off some javascript with out a page refresh or postback to the server. The above code is not working with an asp drop-down control. Is there a way to make this work? 

I have form that hides and shows different textboxes depending on selected values in a dorp-down but it does cause a postback which refreses the screen I want to do this wiithout refreshing the screen and figured Javascript and hide and show divs etc would work.

<script type="text/javascript" language="javascript">
function select_country(selectedcountry)
var country = selectedcountry;

if(country == "United States")
//do nothing;
// hide state drop-down and the state label.
// code goes here...............
} } </script>

The drop-down:

<asp:DropDownListID="ddCountry"runat="server"onchange="javascript: select_country(this.options[this.selectedIndex].text);">


 Of course on change that doesn't work. How can i get that to work like a regular drop-down? Basically I need to hide and show controls based on drop-down values without posting back to the server.


7 Answers Found


Answer 1

you can wireup that javascript function to your drop down in page_load in the code behind

ddCountry.Attributes.Add("onchange", "select_country(this.options[this.selectedIndex].text);");


Answer 2


Make sure that you have not set "AutoPostback" property in markup for dropdown. 


Answer 3

Okay I did that but for some reason nothing happens when I use the drop-down box. 

Here is what the code looks like if i view source on the page..

select name="ddCountry" id="ddCountry" onchange="select_country(this.options[this.selectedIndex].text);">

<script type="text/javascript" language="javascript">
function select_country(selectedcountry)
var country = selectedcountry;

if(country == "United States")



It looks like it should be working but changing the drop-down values does nothing. I put in

document.form1.action="unitedStates.aspx" and the other one just to see if it is doing anything and nothing happens. What could be the problem?



Answer 4

If you add an alert inside the function, does it fire?

It should probably be




Answer 5

I manage to get all the code working for an onchange.. Now I just can't get a javascript function to fire when the page is loaded. It seems to fire before the controls are rendered. I did post ot another older thread that has a simular issue. Here is what i said.

Okay this thread started a while ago but as I am searching for answers on how to run a javascript function AFTER THE PAGE HAS LOADED and not found anything that works yet I am posting here.

I have these lines in a function called init() in the page between the head tags:
var iaspcontrol = document.getElementById(txtEducationOther);
var iasplabel = document.getElementById(LabelEducationOther);

This is an ASP.NET page in C#. In the code behind I am using this line to run the init() function supposedly after the page is loaded.
ClientScript.RegisterStartupScript(this.Page.GetType(), "", "window.onload=init;", true);

I have also tried placing the code at the bottom of the page after the </body> tag:
<script type="text/javascript">

No matter how i do this i get the error below which is telling me that the textbox doesn't exist yet.

Message: 'txtEducationOther' is undefined
Line: 49
Char: 1
Code: 0
URI: http://mike-pc/NurseScienceCourse/registration.aspx

How can i get this to run after all the controls are redered already so I do not get this error?


Answer 6

Message: 'txtEducationOther' is undefined

It is saying the variable is not defined, it has nothing to do with the element. Where are you storing the value?



Answer 7

I abandoned the running a function on load. What I did was to initially HIDE the textboxes and lables on load instead of in an initializing function. then in code I added the onchange and if certain fields are selected then the label and texbox are shown or hidden. I figured otu how to run a javascript function on page load but apparently the asp.net controls aren't available at the time thus it cannot find it and an error is the result. Here is the funciton i wrote to hide and show; maybe it will help someone.

<script type="text/javascript" language="javascript">
function ShowHide(selectedvalue, testvalue, aspcontrol, asplabel)

var iselectedvalue = selectedvalue;
var itestvalue = testvalue;
var iaspcontrol = document.getElementById(aspcontrol);
var iasplabel = document.getElementById(asplabel);

if(iselectedvalue == testvalue){
iaspcontrol.style.display = "block";
iasplabel.style.display = "block";
else {
iaspcontrol.style.display = "none";
iasplabel.style.display = "none";




<< Previous      Next >>

Microsoft   |   Windows   |   Visual Studio   |   Sharepoint   |   Azure