1

最初のドロップダウンの回答に依存する 2 番目のドロップダウンを表示するにはどうすればよいですか。次に、2 番目のドロップダウンが回答された後にボタンが表示されます。

2 番目のドロップダウンを表示する例をいくつか見つけましたが、ボタンのような 3 番目の要素を追加する例はありません。

ドロップダウンに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>

ファイル: 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;
}

必要に応じて、以下に追加の例をいくつか示します。

于 2012-11-29T17:24:22.683 に答える