1

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

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

我知道我将如何使用 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/

4

1 回答 1

0

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

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

文件：另一个_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;
}

如果您愿意，这里有一些额外的示例供您遵循。

于 2012-11-29T17:24:22.683 回答