在第一次选择中进行选择后，填充第二次选择，然后在进行第二次选择后添加按钮？答案

【问题标题】：After making selection in first select populate second select then add button after second selection is made?在第一次选择中进行选择后，填充第二次选择，然后在进行第二次选择后添加按钮？
【发布时间】：2012-11-29 17:05:04
【问题描述】：

如何显示取决于第一个下拉列表中答案的第二个下拉列表，然后在第二个被回答后显示一个按钮。

我找到了一些显示第二个下拉菜单的示例，但没有一个添加第三个元素（如按钮）。

我知道如何使用 php/mysql 填充下拉列表，但我是 jquery 新手。

[更新]

这是我目前所拥有的

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/

【问题讨论】：

当要求这样的完整解决方案时，展示努力的好礼节。也许发布一些你找到的代码，或者告诉我们你尝试了什么。
我发布了一个工作示例供您学习。只需将代码复制/粘贴到服务器上的两个 .php 文件中并运行。您会注意到第一个（未命名的）文件调用了第二个文件，因此您必须将第二个文件命名为another_php_file.php，或更改其在第一个文件中的引用（$.AJAX 调用）。请记住接受答案并为任何其他有用的 cmets/answers 投票。
我用我当前的代码和 jsfiddle 的链接更新了我的问题。我还不能投票，因为我的声望只有 6。

标签： php jquery mysql

【解决方案1】：

这是一个独立的工作示例，可以为您提供一个想法。您的代码将如下所示：

<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>

文件：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 供你关注，如果你愿意的话。

【讨论】：