Today, i want to share about Hide and Show HTML Element based on Select Option Using JQuery

for some purpose, we want to show or hide an HTML element (eg: button, input text, etc) based on select option. we can achieve that requirement using JQury framework you can get here.

We will use hide(), show(), and change() function that already provided by JQuery.
hide function:
example:
[js]
$( “.target” ).hide();
[/js]
From official JQuery description here:

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( “display”, “none” )

show function:
[js]
$( “.target” ).show();
[/js]

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( “display”, “block”), Note: If using !important in your styles, such as display: none !important, it is necessary to override the style using .css( “display”, “block !important”) should you wish for .show() to function correctly.

Change function:

Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

The change event is sent to an element when its value changes. This event is limited to input elements, textarea boxes and select elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus

Here is the example of the code for Hide and Show HTML Element based on Select Option Using JQuery
[html]

Option 1Option 2Other Option

[/html]

Hope this post about Hide and Show HTML Element based on Select Option Using JQuery can be useful for another.
thanks for coming in my site..