Question

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

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

我知道如何用php / mysql填充下拉菜单，但我是jquery的新手。

[UPDATE]

这是我到目前为止所拥有的

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/

Answer 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，如果您愿意，可以跟随。

在第一次选择后选择填充第二个选择然后在第二次选择后添加按钮？

1 个答案: