After making selection in first select populate second select then add button after second selection is made?

Question

How do I display a second drop down that is dependent on the answer in the first drop down, then after the second is answered a button is displayed.

I have found a few examples of displaying the second drop down, but none on add a third element like a button.

I know how I am going to populate the drop downs with php/mysql, but I am new to jquery.

[UPDATE]

This is what I have so far

HTML

<select id="source">
        <option>Select</option>
        <option>Company</option>
        <option>City</option>
        <option>State</option>
    </select>
    <select id="source2a" class="select">
        <option>Sort by</option>
        <option>Sort A-Z</option>
        <option>Sort Z-A</option>
     </select>
     <select id="source2b" class="select">
        <option>Sort by</option> 
        <option>Sort A-Z</option>
        <option>Sort Z-A</option>
    </select>
     <select id="source2c" class="select">
        <option>States</option>
        <option>State 1</option>
        <option>State 2</option>
        <option>Etc.</option>
    </select>

CSS

.select {display: none;}

Javascript

var i = 0;
$(document).ready(function(){
$('#source').change(function () {
    if ($('#source option:selected').text() == "Company"){
        $('.select').hide();
        $('#source2a').show();
    } else if ($('#source option:selected').text() == "City"){
        $('.select').hide();
        $('#source2b').show();
    } else if ($('#source option:selected').text() == "State"){
        $('.select').hide();
        $('#source2c').show();
    } else {
        $('.select').hide();
    } });
 });

http://jsfiddle.net/chonito13/stAAm/

When asking for complete solution like this, its good etiquette to demonstrate effort. Perhaps post some of the code you found, or tell us what you have tried. — Kyeotic, Nov 29 '12 at 17:29
I posted a working example for you to follow. Just copy/paste the code into two .php files on your server and run. You will note that the first (unnamed) file calls the second one, so you must name the second one `another_php_file.php`, or change its reference in the first file ($.AJAX call). Please remember to accept an answer and to upvote any other helpful comments/answers. — cssyphus, Nov 29 '12 at 17:37
I updated my question with my current code and a link to jsfiddle. I cannot vote yet as my reputation is only at 6. — chonito13, Nov 29 '12 at 18:19

score 0 · Answer 1 · edited May 23 '17 at 12:27

Here is a working stand-alone example to give you an idea. Your code will look something like this:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
//alert('Document is ready');
                $('#stSelect').change(function() {
                    var sel = $(this).val();
//alert('You picked: ' + sel);
                    $.ajax({
                        type: "POST",
                        url: "another_php_file.php", // "another_php_file.php",
                        data: 'theOption=' + sel,
                        success: function(data) {
//alert('Server-side response: ' + data);
                            $('#dd2DIV').html(data);
                            $('#theButton').click(function() {
                                alert('You clicked the button');
                            });
                        }
                    });
                });
            });
        </script>
    </head>
<body>

    <select name="students" id="stSelect">
        <option value="">Please Select</option>
        <option value="John">John Doe</option>
        <option value="Mike">Mike Williams</option>
    </select>
    <div id="dd2DIV"></div>

</body>
</html>

FILE: another_php_file.php

<?php
$selStudent = $_POST['theOption'];
if ($selStudent == 'John'){
    $r = '
        <select name="teachers" id="trSelect">
            <option value="">Please Select</option>
            <option value="MrJones">Dr Bill Jones</option>
            <option value="MrSmith">Dr Bob Smith</option>
        </select>
        <button id="theButton">Click Me</button>
    ';
    echo $r;
}else if ($selStudent == 'Mike') {
    $r = '
        <select name="teachers" id="trSelect">
            <option value="">Please Select</option>
            <option value="MrPeters">Dr Bud Peters</option>
            <option value="MrOz">Dr Bruce Oz</option>
        </select>
        <button id="theButton">Click Me</button>
    ';
    echo $r;
}

Here are some additional examples for you to follow, if you wish.

After making selection in first select populate second select then add button after second selection is made?

1 Answers1