Member Avatar for Nfurman

Hello again

I have two drop-down lists on my web application.

#1. Country list
#2. US states list

By default #2 is disabled

protected void Page_Load(object sender, EventArgs e)
    {
        State.Enabled = false;  
    }

I need to enable it only if user will choose "United States".
My trial was as such:

private void CheckIfAmerican()
    {
        if (Country.Text == "United States") //Country is the name of #1 ddlist
        {
            State.Enabled = true; //State is the name of 2# ddlist
        }
    }

How to implement this case?

  • 2 Contributors
  • 2 Replies
  • 114 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Nfurman

Dani AI

Generated

Nice, ’s server-side approach answered the original question and worked for . A couple of practical additions that make this more robust and give a smoother UX:

Client-side (no postback) — quick and responsive. Use the rendered client IDs to toggle the second select in-browser so users don’t wait for a round trip:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var country = document.getElementById('<%= Country.ClientID %>');
  var state = document.getElementById('<%= State.ClientID %>');
  function toggleState() {
    state.disabled = country.value !== 'United States';
  }
  country.addEventListener('change', toggleState);
  toggleState();
});
</script>

Server-side notes — if you stick with ’s SelectedIndexChanged method: enable AutoPostBack on the country DropDownList, and avoid resetting the state control on every Page_Load (set initial disabled state in the markup or only on first load). Prefer comparing SelectedValue (and trim/case-insensitive compares if values come from external sources) rather than Text.

Accessibility and submission gotchas — a disabled HTML select is omitted from form submission. If the server needs a value even when the control is disabled, include a hidden field or choose to hide the control instead. Also update ARIA attributes if you want assistive tech to reflect the change.

Troubleshooting — when the client-side script seems not to run, inspect the generated element IDs (use the browser dev tools) or ensure the script runs after the elements exist. For AutoPostBack behavior, Microsoft docs explain how the property works: AutoPostBack doc. For plain DOM events see addEventListener (MDN).

Recommended Answers

All 2 Replies

Member Avatar for MeSampath

Hi,

Here is the simple idea;

1) Use the "SelectedIndexChanged" event and call your function. A simple example;

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (DropDownList1.Text == "US")
                DropDownList2.Enabled = true;
            else
                DropDownList2.Enabled = false;
        }

2) Eliminate the "State.Enabled = false;" from page_load event since it will be fired every server request.

3) Do not forget to set the "AutoPostBack" property to set "true"

Good luck.

Member Avatar for Nfurman

thank you very much! it works

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.