Regular field 1:
Regular field 2:
Extra field 2:
The HTML side of things looks pretty much how you’d expect. The dropdown has an ID attribute of “dropdown”, and the div containing the extra text fields has an ID of “optional”. Obviously using such unimaginative and generic ID attributes in real life would be terrible. This is only a tutorial of course.
Inside the ready function, an event handler is defined for the drop down list: $(“#dropdown”).change. JQuery defines multiple events that you can hook into. In our case, we are interested in the change event.
The event hander uses an if conditional evaluates the value of the selected drop down list item. Luckily, we no longer have to use awkward document.GetElementById calls to access elements inside the DOM. Instead you can simply use the shorthand: $(“#id”). Grabbing the value of an element can then be done by calling the val() method. So, in order to figure out what the selected value of the drop down is, we simply call $(‘#dropdown’).val()
An If conditional is used to evaluate the value and show/hide the div accordingly. Note that JQuery comes with Show and Hide functions (and quite a few others) which do exactly what you’d expect. No more need to set css visibility properties manually!
So there you have it. A simple tutorial (albeit a trite example) on JQuery!