What is the best way to conceal a div element on a Razor Page depending on the user's input?

How can I display the state field only when the user selects United States in the country field, and hide it otherwise? Here is the code snippet from my cshtml page:

<div class="form-group col-sm-4 mt-4">
    <label asp-for="Form.Country" class="control-label"></label>
    <select asp-for="Form.Country" class="form-control">
    <option disabled selected>Choose your Country</option>
    <option>Canada</option>
    <option>United States</option>
    <option>Mexico</option>
    </select>
    <span asp-validation-for="Form.Country" class="text-danger"></span>
</div>
<div class="form-group col-sm-4 mt-4">
    <label asp-for="Form.State" class="control-label"></label>
    <select asp-for="Form.State" asp-items="Model.States" class="form-select">
        <option disabled selected>Choose your State</option>
    </select>
    <span asp-validation-for="Form.State" class="text-danger"></span>
</div>
<div class="form-group col-sm-4 mt-4">
    <label asp-for="Form.City" class="control-label"></label>
    <input asp-for="Form.City" class="form-control" />
    <span asp-validation-for="Form.City" class="text-danger"></span>
</div>

I have looked into solutions involving JS, but I am not comfortable with it at this time. Is there a way to achieve this using razor or possibly integrate a blazor component or apply CSS?

c#htmlcssasp.net-corerazor-pages

Answer №1

It brings me great joy to see that you are able to utilize JavaScript for this task. Here is a straightforward demo with explanations, I trust it will help resolve your problem.

Start by adding an onchange() method on the first dropdown list:

<select asp-for="Form.Country" class="form-control" onchange="Select()">

Add an Id for the second dropdown list:

<div class="form-group col-sm-4 mt-4" id="demo">
    .........
</div>

Next, include the following JavaScript in your view:

@section scripts
{
    <script>
        function Select(){
            //access the element by its id
            var select = document.getElementById("Form_Country");
            //capture the selected option's text
            var index = select.selectedIndex;
            var text = select.options[index].text;
            //if the option's text is not "United States", hide the second dropdownlist
            if(text!="United States"){
                //hide the dropdownlist
                document.getElementById("demo").style.display='none';
            }else{
                //show the dropdownlist
                document.getElementById("demo").style.display='block';
            }
        }
    </script>
}

Check out the Demo: https://i.stack.imgur.com/GGkwi.gif

Answer №2

Here is the solution you need

@if (Form.Country == "UnitedStates")
{
 CODE FOR DISPLAYING STATE OPTIONS
}

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

Which element can be slotted?

Is it possible to use a tr (table row) for a named slot? What is the outcome when a tr is used as a slot's fallback content? For example: <x-table> <tr slot="x-row"> <td>data</td> <td>data</td> ...

htmlshadow-domcustom-elementslotnative-web-component

Overriding makeStyles CSS in Material UI Styling

When creating classes using makeStyles and useClasses, I've noticed that MUI CSS tends to take precedence over my custom styles unless I use the '!important' rule. Is there a way to override MUI styles without having to rely on '!import ...

cssreactjsmaterial-ui

Can you explain the relationship between HTML 5 Canvas coordinates and browser pixels?

When trying to use HTML 5 canvas as a drawing board in my application, I encountered an issue. The drawings appear at an offset from the mouse pointer. My method involves using the Jquery .offset function to determine the event's position on the canv ...

javascriptjqueryhtmlhtml5-canvasdom-events

Turn off the special treatment of the "class" attribute

The Background: When using BeautifulSoup to parse HTML, the attribute class is considered a multi-valued attribute and is treated differently: It's important to remember that a single tag can have multiple values for its "class" attribute. When se ...

pythonhtmlbeautifulsouphtml-parsing

Ensure that the text is contained within a div element with a border-radius of 100%

Is there a way to set text inside a div with a border-radius of 100% in a circular shape? I have paragraphs and ul li's within the div, but the text goes outside the borders. How can I wrap the text within the curved edges of the div? ...

htmlcss

Tips for keeping two divs aligned horizontally on a webpage

Currently diving into the world of Bootstrap 5, I am facing a challenge with keeping my links and the label "Testing" on the same line. Despite using text-start and text-end classes, they refuse to cooperate. How can I ensure that they both stay aligned ho ...

cssbootstrap-5

Pass the ID of the <a> element from one function to another

I am a beginner in javascript/jQuery, so please be patient with me if my question seems too simple for you and too challenging for me. I have a function that I won't post the entire code for because it would make this too lengthy. Another function ...

javascriptjqueryhtmljsonajax

Exit PopUp malfunctions and fails to function correctly

Hey everyone, I'm having an issue with my exit PopUp. It was working fine initially, but now it doesn't appear again when I scroll down the site page. Can someone please help me figure out what's going wrong? Sorry for any confusion, and tha ...

phpjqueryhtmlcsspopup

In the latest version of Bootstrap, the carousel has been redesigned to smoothly transition across the entire page, providing a

I am currently in the process of learning Bootstrap 5 and decided to create a simple carousel by referring to the official documentation on Bootstrap 5 Carousel. Following their instructions, I copied their code and integrated it into my template. Howeve ...

htmlcsscarouselbootstrap-5

Safari is not properly handling element IDs when used in conjunction with React

I am currently in the process of building a straightforward single-page website utilizing React. At the top of the page, there is a navigation bar that contains links to various sections of the site: <li><a href="/#about">About u ...

javascripthtmlreactjssafarianchor

When a table cell is hovered over, a left border will be added

I've been working on adding a left border to the text in a way that highlights the first cell's border when hovering over a row, providing a clear indication of the current row for users. Feel free to check out my progress so far on this fiddle: ...

htmlcss

What is the best way to choose a specific div within a container that contains additional HTML elements?

I am facing an issue with selecting the second div tag within a section that contains 2 divs and an img tag. I attempted to use section div:nth-child(2), but it is targeting the second element inside the first div. However, my goal is to select the secon ...

htmlcss

Transitioning CSS for transformative text effects

Is there a way to create an effect similar to the "HOVER ME" animation on a div? I want the text to move down and another text to appear from above when hovering over the div, without separate letters. The transition should be seamless and reversed when th ...

htmlcsssasshaml

Enhancing navigation with creative hover effects

I've noticed a trendy effect on several websites and I'm curious about how it's done For example: When you hover over one of the navbar links, it appears as a button rather than a differently colored text link. How can I achieve this? I am ...

htmlcssreactjstwitter-bootstrapbootstrap-5

Steps for Loading HTML5 Video Element in Ionic 2

Struggling to showcase a list of videos from my server, here's the issue I'm encountering and the layout of the app. https://i.stack.imgur.com/HWVt3.png This is the code snippet in HTML: <ion-list> <button ion-item *ngFor="let v ...

htmlangularcssionic2ionic3

Transforming the RichTextBox into a Label

As I work on my application, I find that using a rich text box as a label is the most effective way to display certain information. However, I have encountered an issue where the text within the read-only rich text box can still be selected by users. Is th ...

c#.netwinformsrichtextbox

Switch out the HTML content within the JavaScript include

Here is the situation: <script type="text/javascript" src="http://xy.com/something.js"></script> This code snippet in my PHP/HTML file loads the entire something.js file. Inside that file, there are lines containing "document.write..." which ...

phpjavascripthtml

Modifying the color of a specific node in jstree

I am attempting to modify the background color of the node I have selected in jstree. $('#syncrep').jstree({ 'core' : { 'data' : repository ...

javascriptjqueryhtmlangularjsjstree

What is the manual way to activate Ratchet's push feature?

I am facing an issue with a link that triggers a search function. Currently, the link is working as expected. However, I am having trouble getting the search to be executed by pressing the 'enter' button. Here is my code snippet: $('#sea ...

javascripthtmlmobileratchet-2

Document the user's input by recording it in a text file

After experimenting with a simple HTML code like this: <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> ...

htmlinputtextuser-input