jQuery: Multiple Values - Dropdown Menus

Question

Is this the correct way to pass two ids in jQuery?

I am having the following issue as seen in the image.

Domain Registration: Doesn't show input box.

Domain Transfer: Only shows one input box.

Image:

enter image description here

CSS:

#domainToBeReged, #domainToBeReged0, #domainToBeTransfered{
    display:none;
}

HTML:

<label for="domainRequired">Domain Registration: </label>
                    <select name="domainRequired" id="domainRequired">
                        <option value="pleaseSelect">Please Select</option>
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                    </select>
        <div id="domainToBeReged">
            <label for="domainToBeReged">Domain One:</label><input name="domainToBeReged" id="domainToBeReged" type="text" placeholder="http://www." />
            <label for="domainToBeReged0">Domain Two:</label><input name="domainToBeReged0" id="domainToBeReged0" type="text" placeholder="http://www." />

        </div>
        <label for="domainTransfer">Domain Transfer: </label>
                    <select name="domainTransfer" id="domainTransfer">
                        <option value="pleaseSelect">Please Select</option>
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                    </select>
        <div id="domainToBeTransfered">
                    <label for="domainToBeTransfered">Domain:</label><input name="domainToBeTransfered" id="domainToBeTransfered" type="text" placeholder="http://www." />
                  <label for="domainToBeTransfered0">Domain:</label><input name="domainToBeTransfered0" id="domainToBeTransfered0" type="text" placeholder="http://www." />
        </div>
        <label for="currentHosting">Current Hosting: </label>
        <textarea cols="10" rows="10" name="currentHosting" id="currentHosting"></textarea>
        <input type="submit" class="nextButton" value="Next" />
        </fieldset>
    </form>

jQuery:

    jQuery(document).ready(function() { 
$('select[name="domainRequired"]').change(function() {
            var $domain = $('#domainToBeReged','#domainToBeReged0');
                if ($(this).val() == 'yes') {
                    $domain.show();
                } else {
                    $domain.hide(); 
        }
            });             


        $('select[name="domainTransfer"]').change(function() {
            var $domain = $('#domainToBeTransfered');
                if ($(this).val() == 'yes') {
                    $domain.show();
                } else {
                    $domain.hide(); 
        }
            });             

    });

pimvdb · Accepted Answer · 2012-04-06 21:30:03Z

4

It's not completely correct:

$("selector1", "selector2") is searching for selector1 inside selector2. It's basically equivalent to $("selector2").find("selector1"). You seem to just want two independent selectors. Use the comma selector instead.
You can use .toggle(bool) to eliminate the if and show/hide.

$("#domainToBeReged, #domainToBeReged0").toggle($(this).val() === "yes");

answered Apr 6, 2012 at 21:30

pimvdb

155k80 gold badges313 silver badges358 bronze badges

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

Comments

hofnarwillie · Accepted Answer · 2012-04-06 21:29:55Z

1

No your jquery must be:

$('#domainToBeReged,#domainToBeReged0');

answered Apr 6, 2012 at 21:29

hofnarwillie

3,65010 gold badges54 silver badges77 bronze badges

Collectives™ on Stack Overflow

jQuery: Multiple Values - Dropdown Menus

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related