jQuery to display textarea information

Question

User-34860367 posted

Hello,

I got a dropdown list in Razor view as follows:

@Html.DropDownListFor(m => m.Filter, new SelectList(ViewBag.Filters, "Value", "Text"), "01. All", new { @class = "form-control", id = "ddlFilters" })

@Html.TextArea ...

I need to implement a jquery script to display textarea when click cursor on above dropdown and fadeout textarea if not focus on dropdown in ASP.NET MVC.

Thanks.

Answer 1

User-2054057000 posted

Based on your requirements to FadeIn & FadeOut a textarea you can use the below code:

$("#ddFilters").focus(function(){
  $("#textarea1").fadeIn();
});

$("#ddFilters").blur(function(){
  $("#textarea1").fadeOut();
});

Here textarea1 is the text area's Id.

Answer 2

User1520731567 posted

Hi avt2k7,

I need to implement a jquery script to display textarea when click cursor on above dropdown and fadeout textarea if not focus on dropdown in ASP.NET MVC.

According to this word,

if you want to display TextArea when DropDownListFor is selected, otherwise TextArea will faded out when DropDownListFor not be selected.

You could follow @yogyogi's said.

If you also want to display content in TextArea  which is related to DropDownListFor selection,you could add change() event,for example:

    @Html.DropDownList("Cities", (IEnumerable<SelectListItem>)ViewBag.Cities, "All Cities", new { @class = "form-control search-slt" })


    @Html.TextArea("txtArea", null, new { @class = "form-control"})

JS:

   <script>

        $("#Cities").focus(function () {
            $("#txtArea").fadeIn();
        });

        $("#Cities").blur(function () {
            $("#txtArea").fadeOut();
        });

            $("#Cities").change(function () 
       {
            $("#txtArea").val($('#Cities :selected').text());

        })
    </script>

Like the picture:

If you still have any questions,please post more details.

Best Regards.

Yuki Tao