CODEWITHSUNDEEP
jquery
Jess McKenzie
Jess McKenzie

Reputation: 8385

jQuery Option Select

How could I make the required input text boxes show when the correct drop down item is selected.

Example:

When yes is selected it will ask for the details about the domain.

<label for="domainRequired">Domain required: </label>
<select name="domainRequired">
    <option value="pleaseSelect">Please Select</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
</select>

Update:

HTML:

<label for="domainRequired">Domain required: </label>
            <select name="domainRequired">
                <option value="pleaseSelect">Please Select</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
            <label for="domaintobereged">Domain:</label><input name="domaintobereged" id="domaintobereged" type="text" placeholder="http://"/>

jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $('#domainRequired').change(function() {
            var $domain = $('#domaintobereged');
            if ($(this).val() == 'yes') {
                $domain.show();
            } else {
                $domain.hide();
            }
        });
     });
    </script>

I have loaded my jQuery in the footer above the </body> tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="http://#.co.nz/_assets/js/jquery-1.7.2.min.js"><\/script>')</script>

Upvotes: 0

Views: 362

Answers (4)

zerkms
zerkms

Reputation: 254926

Supposing you have added the appropriate id's to your elements - the major work could be done as:

$('#domainRequired').change(function() {
    var $domain = $('#domain');
    if ($(this).val() == 'yes') {
        $domain.show();
    } else {
        $domain.hide();
    }
});​

or even

$('#domainRequired').change(function() {
    $('#domain').toggle($(this).val() == 'yes');
});​

Live examples: http://jsfiddle.net/zerkms/3XYMT/ & http://jsfiddle.net/zerkms/3XYMT/1

Upvotes: 2

Eugene Retunsky
Eugene Retunsky

Reputation: 13139

Cross browser solution:

var $select = $('select[name="domainRequired"]');
$select.change(function() {
    if ($select.find('option:selected').val() == 'yes') {
        // make inputs required
    } else {
        // make inputs optional
    }
});

Upvotes: 0

Marty
Marty

Reputation: 39456

Have a look at .change().

Used roughly like this:

$("[name=domainRequired]").change(function()
{
    // Show a text box if YES was selected (perhaps using .val() ?)

});

Upvotes: 0

nathanjosiah
nathanjosiah

Reputation: 4459

$('select[name="domainRequired"]').change(function(e){
    if(e.target.value === 'yes') {
        // Do stuff
    }
});

Upvotes: 0

Related Questions