jQuery to display textarea information  [Answered]RSS

• • Reply
  avt2k7

  Member

  169 Points

  414 Posts

  jQuery to display textarea information

  Jul 19, 2019 03:59 AM|avt2k7|LINK

  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.

• • Reply
  yogyogi

  Participant

  1060 Points

  732 Posts

  Re: jQuery to display textarea information

  Jul 19, 2019 05:12 AM|yogyogi|LINK

  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.

  Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
  ♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
• • Reply
  Yuki Tao

  Contributor

  3660 Points

  1431 Posts

  Re: jQuery to display textarea information

  Jul 19, 2019 06:43 AM|Yuki Tao|LINK

  Hi avt2k7,

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.