Using Javascript to trigger an event when an option is changed in an ASP dropdownlist

Can someone provide me with sample javascript code that can be used to determine if an item has been selected in a dropdown list and then make it visible?

Answer №1

Here is a jQuery solution I would recommend:


    $(function () {
        $("#<%= AspControlName.ClientID %>").change(function () {
            if ($(this).val() == "TheValueYouWant") {
                $("#WhatToShowID").show();
            } else {
                $("#WhatToHideID").hide();
            }
        });
    });

Answer №2

To implement this functionality using C# in the code, you can follow these steps:

Here is an example of the HTML:

<asp:DropDownList ID="DropDownList1" autopostback="true" runat="server">
</asp:DropDownList>

C# Code:

protected void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e)
{
    //Ensure that all extra stuff is hidden
    item_1_extra_stuff.Visible = false;
    item_2_extra_stuff.Visible = false;

    switch (DropDownList1.Text) {
        case "Item 1":
            item_1_extra_stuff.Visible = true;
            break;
        case "Item 2":
            item_2_extra_stuff.Visible = true;
            break;
    }

}

The autopostback feature allows the dropdown list to trigger the event, and then the switch statement determines which option was selected and shows or hides the required elements accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JSON format is used for returning values from WebMethod calls

How can I retrieve values from a Webmethod and format them in JSON for the client? I have two static int values that need to be returned. Do I have to create a new object with these properties each time, or is there a more efficient way to handle this? Th ...

GridView RowUpdating - Parameters for updating

I'm struggling with setting the Update Parameters for my GridView. Most of the fields in the GridView are DataBound, but two of them are dropdown lists - one with predefined list items and another that pulls data from a different source. I want to set ...

How to avoid repeated values in Sugar CRM by implementing Ajax functionality

I recently created a module using the module builder, and now I have a field called "Book Name". However, the system is allowing me to enter the same book name multiple times. Instead of resorting to a plugin for duplicate value checks, I would like to cu ...

Avoid losing any entered form information when leaving the page

As I work on creating a datagrid with hundreds of rows, each row features a checkbox that allows users to select items from the grid. I've noticed that users might spend considerable time filtering and searching through the grid, ticking checkboxes a ...

What is the largest file size that JavaScript is capable of processing?

Similar Inquiry: Javascript Memory Limit Currently, I am in the process of constructing an HTML page using client-side JavaScript that aims to load a significant XML data file weighing around 150mb upon page initialization. Initially, when the file si ...

Methods for verifying the device on which a web application is currently operating

After developing a web application using node.js, express, angular, and bootstrap, I noticed that the layout and forms were not displaying correctly on all devices. Specifically, when running the app on a different device, such as an iPad or laptop, the fo ...

Verify if the term is present in an external JSON file

I am currently using tag-it to allow users to create tags for their posts. At the moment, users can type any word, but I have a list of prohibited words stored in JSON format. I am looking for a way to integrate this list into the tagit plugin so that if ...

Is there a way to identify which specific item in a watched array has been altered in VueJS?

Imagine having an array declared in the data section like this: data() { return { myData : [{foo:2, bar:3},{foo:4,bar:5}] } } If you want to identify when the bar property of the second element changes, what should your watch function look li ...

Error in tabs.onUpdated argument in Firefox WebExtensions

I am currently working on developing a straightforward webExtension for Firefox and I would like to implement tabs.onUpdated with a filter. I found an example on the Mozilla website that I decided to use: const pattern1 = "https://developer.mozilla.org/*" ...

Can JavaScript alter the Page Source Code?

Something that has caught my attention recently is the behavior of my website's AJAX implementation. When my site receives a response, it is inserted into div elements using the .innerHTML method. For example: $("#cont-btn") .click(function() { ...

TravisCI - Deploying Asp.net to a Linux Server

Although I can successfully build my asp.net 4 (MVC) Application using TravisCI.org, I am facing difficulties in transferring the output from Travis to my Linux server. I am thinking of resolving this issue by creating a *.sh file, but I am unsure about h ...

Convert XML to JSON using an Express.js proxy pipeline

In order to access an external API that does not support CORS for my front-end (angular) application, I have implemented a simple proxy using Node.JS / Express.JS to handle the requests. This setup allows me to securely store my api credentials at the prox ...

Revamping the settings page by featuring a single "save changes" button

Is it possible to create a settings.php page where users can update their personal information, such as username, password, and email, all within the same page? I know how to perform these tasks individually, but I'm unsure about integrating different ...

There are two notable problems with Bootstrap 4 Tooltip. The first is that it appears when a button is clicked, and the second is that it shows up for disabled elements

I am currently experiencing an issue with my tooltip while using Bootstrap 4. In my index.html, I have the following script loaded: $('body').tooltip({ selector: '[data-toggle="tooltip"]', delay: { show: 550, hide: 0 } }); The proble ...

Tips on using Ajax to post in HTML

Here is the code I have been working on: <script type="text/javascript"> var xmlDoc; var xmlhttp; function loadRates() { xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = readRates; xmlhttp.open("GE ...

Include the url of the html file in your JavaScript code

I have a piece of code that I want to include in my JavaScript instead of HTML. The code is as follows: <script async src="https://www.googletagmanager.com/gtag/js?id=ID"></script> Since all my functions are written in JavaScript, I ...

How can I maintain the toggle state when a PHP file is reloaded inside a div?

I developed a PHP script that parses a table and loads it into a specific division: <div id ="videprinter"> <script type="text/javascript"> $(function(){ function load(){ $("#videprinter").load("videprinter.php") ...

How can you ensure in Typescript that a function parameter belongs to a specific set of enumerated values?

Consider this example enum: export enum MyEnum { a = "a", b = "b", c = "c" } Now, let's define a function type where the parameter must be one of these values. For instance, myFunction("c") is acceptabl ...

Simplify a JSON array in JavaScript by removing nested layers

Looking to flatten a JSON nested array object into a flat array The key and value pair should be dynamic based on user input array I attempted to write the code myself but I'm not very familiar with JavaScript functions like concat, push, or others. ...

Importing usernames and passwords from a .txt file with Javascript

I'm in the process of creating a website that includes a login feature. The usernames and passwords are currently stored within the website files as .txt documents. I am aware that this method is not secure, but for the purpose of this project, I want ...