Show/hide div on dropdown

JavaScript
1

I can write PHP all day but am just getting started with Javascript, jQuery, and clientside scripting in general. I’m trying to write a function that will show the div #genders when “Shared” is selected from a dropdown menu. In all other cases I want the div to be hidden.

Here’s what the HTML looks like


<label for="status">Property Status</label>
<select name="status" id='selector' onChange='toggleShared();'>
<option value="" selected="selected"></option>
<option value="Shared">Shared</option>
<option value="Vacant">Vacant</option>
</select>

<div id='genders' style='display:none;'>
<label for="gender">Gender Preference</label>
<select name="gender" id='genders'>
<option value="No Preference">No Preference</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
</select></div>

Here’s some javascript/pseudo-code i came up with to try to get this to work but I haven’t been able to so far. I’m using jQuery in another portion of the page so it is loaded in if it would be easier to write a jQuery function.


<script>
     function toggleShared() {
          selector = document.getElementById('selector');
          genders = document.getElementById('genders');
          if(selector.val() == 'Shared') {
                genders.style.display = 'block';
          }
          else {
                genders.style.display = 'none';
          }
     }
</script>

I appreciate any feedback!

2

There’s trouble with your HTML code too, because the for attribute is connected with the id, not the name as you currently have.

You can completely bypass those sorts of issues by wrapping the label around the form field instead.

<label>Property Status
    <select name="status">
        ...
    </select>
</label>

When scripting with forms, it’s best to access the form via the form element itself, because that then gives you easy access to all of the form elements within it.


<form id="rentalProperties">
    <!-- Paragraphs are used for forms, which the upcoming HTML5 form specs help to clarify
        http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#writing-a-form's-user-interface -->
    <p>
        <label>Property Status
            <select name="status">
                <option value=""></option>
                <option value="Shared">Shared</option>
                <option value="Vacant">Vacant</option>
            </select>
        </label>
    </p>
    <p>
        <label>Gender Preference
            <!-- The gender select is not hidden at this stage, for that would be fatal for those who don't have scripting available
                Notice too that no unique identifiers are required, except for on the form tag itself. They can be used for
                other purposes such as styling, but with scripting things are more flexible and less restricted without them -->
            <select name="gender">
                <option value="No Preference">No Preference</option>
                <option value="Female">Female</option>
                <option value="Male">Male</option>
            </select>
        </label>
    </p>
</form>
...
<script src="script.js"></script>
</body>



function toggleShared() {
    var form = this.form,
        status = form.elements.status,
        // Use gender's parent because we want the label to be hidden too
        gender = form.elements.gender.parentNode;

    // Start by giving the default nature of things, with gender hidden
    gender.style.display = 'none';

    // Now only show gender if applicable
    if (status.value == 'Shared') {
        // An empty string is more compatible than using 'block' or 'inline' as it allows the element to use its own default display type.
        gender.style.display = '';
    }
}

// connect the function to the selects onchange event
var form = document.getElementById('rentalProperties');
form.elements.status.onchange = toggleShared;

// and lastly, trigger the onchange event, which causes the gender select to be hidden
form.elements.status.onchange();
3

Thank you so much for your help it worked perfectly! I apologize for the delay in my response it’s finals week for me and I’ve been quite busy.