How to show and hide content using select dropdown box using Jquery

Step 1 : First hide your content which you want to hide by using style=”display: none;” and also set id id=”mobileno_textbox”

Step 2 : call function in select box code like onchange=”fun_showtextbox()”

Step 3 : create function fun_showtextbox() in your js file

function fun_showtextbox()
{
    var select_status=$('#messagetype').val();
    /* if select personal from select box then show my text box */
    
if(select_status == 'Personal')
    {
        $('#mobileno_textbox').show();// By using this id you can show your content    
    }
    else
    {
        $('#mobileno_textbox').hide();// otherwise hide   
    }
    
}

Note : * must be sure your jquery.min.js is included first

https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js

Related Posts

Divyesh Patel

I'm Divyesh Patel, Web & App developer. I want to make things that make a difference. With every line of code, i strive to make the web a beautiful place.

Leave a Reply