1

Here is the JSFiddle relating to my question. http://jsfiddle.net/kane/MFJUv/

I've tried several things to show/hide the dropdown (div id: machinedropdown).

On load I want the machine dropdown to be hidden but when a user selects the "Machine" radio button it needs to show. Can anyone suggest a solution for me? 

<div data-role="content" id="radio" <form> <fieldset data-role="controlgroup" data-type="horizontal" class="center-controlgroup"> <input name="radio-choice-h-6" id="radio-choice-h-6a" type="radio" checked="checked" value="on"> <label for="radio-choice-h-6a">Run</label> <input name="radio-choice-h-6" id="radio-choice-h-6b" type="radio" value="off"> <label for="radio-choice-h-6b">Swim</label> <!-- ON SELECT I NEED TO HIDE THE "div id = "machinedropdown" --> <input name="radio-choice-h-6" id="radio-choice-h-6c" type="radio" value="off"> <label for="radio-choice-h-6c">Machine</label> </fieldset> </form> </div> <div data-role="content" id="machinedropdown" <label class="select" for="select-choice-1">Select, native menu</label> <select name="select-choice-1" id="select-choice-1"> <option value="standard">Machine 1</option> <option value="rush">Machine 2</option> <option value="express">Machine 3</option> <option value="overnight">Machine 4</option> </select> </div>
Improve this question

1 Answer 1

Reset to default
3

One way to do it, is to check whether the radio is both checked and that it is the element that contains the ID specific to machine.

Firstly, you set the initial state of the drop down to hidden:

$('#machinedropdown').hide();

Next, you listen for the change event on the radio inputs - if the input is both checked and has the ID specific to the machine input (radio-choice-h-6c) you set the drop-down to display - otherwise, set it back to hidden (so that when you change the selected radio button from machine to another option, the drop-down isn't still showing):

$('input').change(function(){ // On change of radio buttons if ($(this).is(':checked') && $(this).attr('id') == 'radio-choice-h-6c') { $('#machinedropdown').show(); // If the radio button is checked and has the machine id, show the drop down. } else { $('#machinedropdown').hide(); // Else, re-hide it. } });

jsFiddle here.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Wow, that works. Thank you! I'll go through your javascript to see what's going on.
if you are not looking for any transition animation, placing a display none class on the element and removing that class using the same concept is another route to consider!
Thanks @BrettWeber I'll give that a try also for learnings sake. Another question has risen from the solution provided by Zenith and it probably applies to your method.
I'm using Phonegap. When I use the solution provided I can place it inside the function onBodyLoad() and it works. However when simply placing the javascript within a <script> tag in the html it doesn't work. I have a feeling I need this script to fire after the page is completely initialized. Do you have an idea of why this is happening? Why it works in the phonegap onBodyLoad() and not in a <script> tag
@Kane That is because the script is running before the dom has loaded and been put in place.. If you change the provided solution to be contained in $(document).ready( function() { here } it should work, or you could use $('selector').on("event", function) to apply it to every element existing or that will exist using that selector.