38170

jQuery on select show div

i have one question about jQuery. If user select "Presmerovanie" with value "0" in html select with id "typ" i want to show div with id "pres" . Here is the code:

<dl> <dt><label for="typ">Typ</label></dt> <dd> <select id="typ" size="1"> <option value="1">Normálna</option> <option value="0">Presmerovanie</option> </select> </dd> </dl> <!-- Len ak je presmerovatelna --> <div id="pres" style="display: none;"> <dl> <dt><label for="presmerovat">Presmerovat na</label></dt> <dd> <select id="presmerovat" size="1"> <option>Category 1</option> <option>Category 2</option> </select> </dd> </dl> </div> <!-- Koniec ak je presmerovatelna -->

is it possible?

Answer1:

$("#typ").on("change", function() { $("#pres").hide(); if ( $(this).val() == '0' ) { $("#pres").show(); } });​

demo

Answer2:

To make it flexible you can add data attributes to the drop down items:

<select id="typ" size="1"> <option value="1" data-rel="norm">Normálna</option> <option value="0" data-rel="pres">Presmerovanie</option> </select>

Then bind the change event and handle the selection:

$(document).ready(function() { $("#typ").on("change", function() { $(this).find("option").each(function() { var rel = $(this).data("rel"); if (rel && rel.length > 0) { var obj = $("#" + rel); if ($(this).is(":selected")) obj.show(); else obj.hide(); } }); }); //show initial item: $("#typ").change(); });​

This will show only the related element of the selected item and hide all others.

Live test case.

Recommend

  • Compiler agnostic runtime type information?
  • Given 3 pts, how do I calculate the normal vector?
  • How to export Rcpp Class method with default arguments
  • Searching IMAP inbox for messages from a specefic sender and use of wild cards?
  • Does Go allow specification of an interface for a map with particular key type?
  • XML file with DTD displays fine in web browser after invalid change
  • Get large facebook video thumbnail using graph
  • QT5 and SQLite3 “No query Unable to fetch row”
  • Facebook errors when using multiple .js api
  • Resizing a background image via CSS
  • double precision error when converting to scientific notation
  • A simple datepicker in VueJS
  • Hatch area using pcolormesh in Basemap
  • How to make Plotly chart with year mapped to line color and months on x-axis
  • How to parsing NSDate to RFC 822 always use in English?
  • iOS Date formatting
  • How can I count unique terms in a plaintext file case-insensitively?
  • Programmatically Update Linked Named Range of excel object in MS Word (2007)
  • Xaml, wpf image position and crop issue
  • Inversing an interpolation of rotation
  • C# - Most efficient way to iterate through multiple arrays/list
  • HttpClient: disabling chunked encoding
  • Display validation errors inside
  • Floated image with variable width and heading with background image
  • Extract zip entries to another Zip file
  • Using a canvas object in a thread to do simple animations - Java
  • Remove final comma from string in vb.net
  • How do I access an unhandled exception in an MVC Error view?
  • GridView breaks while scrolling
  • How to change the font size of a single index for UISegmentedControl?
  • Time complexity of a program which involves multiple variables
  • copying resource to sdcard gives a damaged file in android
  • Atlas images wrong size on iPad iOS 9
  • Google Custom Search with transparent background
  • Change multiple background-images with jQuery
  • Android screen density dpi vs ppi
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • vba code to select only visible cells in specific column except heading
  • Change an a tag attribute in JavaScript based on screen width
  • To Get the radio button value in ruby on rails