选择框更改时显示/隐藏DIV

Question

I have a form where the end user can select various options to create a hardware device listing. I would like to hide specific fields (IP Allocations) in a DIV when no value is selected in a Select Box (default), but once they choose a value in the Select Box, I want to show the DIV containing the extra fields. Can I do this and repopulate the contents of the hidden fields by calling a PHP function from the JS?

                <fieldset style="width:30%; float:left;">
                    <label>IP Allocation</label>
                    <select name="ipv4b" style="width:92%;">
                        <?php
                            $ipv4_values = array("id", "ip");
                            display_options_list($ipv4_values, "ipv4", "id", true);
                        ?>
                    </select>
                </fieldset>

Answer 1

You'd be better off hiding it by default and then showing it.

This is the most basic way of doing it:

// I'm just assuming here, I don't know the class, name or etc of
// your select list
$('select[name="datacenter"]').change(function()
{
    // Check if it's empty
    if($(this).val() != '')
    {
        // Again, I'm assuming here since I don't know the name of your class
        $('.ip-allocation-div').show();
    }

    else
    {
        // No value set, hide it.
        $('.ip-allocation-div').show();
    }
});

Please supply the class names for a more specific example.

As for calling a PHP function through JavaScript, you'd need to make an AJAX call for that.
Here is a basic example:

$.ajax(
{
    url: 'path/to/page.php',

    // This should be an object of data you want to send,  
    // remove if no data will be sent
    data: {}, 
    type: 'POST',

    // Your callback function
    success: function(response)
    {
        // Do something with the data
    }
})