开发者

using JQuery with mySQL confusion

HI, I have code like this. what I am doing is populating the first select with the MySQL data and based on the selection the first , using jQuery, I am populating the second one. Now, my question is, can I use the same combos_get.php to populate the another select based on user selection from the second select?

Is yes, then please look at the comment 'stuck at this point' where I am confused on how to get the data on the the third select.

    <html>
          <head>
            <link href="style23.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

            <title></title>

          </head>
        <body>

        <div align="left" style="position:absolute;top:10px;">

         <select name="select1"  id="select1" size="10px;">
        <?php 
        // Make a MySQL Connection
        mysql_connect("localhost", "root", "bob") or die(mysql_error());
        mysql_select_db("mydb") or die(mysql_error());

        $result = mysql_query("select * from results where ID NOT LIKE 'Ex%' ") or die(mysql_error());  

        // store the record of the "example" table into $row
        while($row = mysql_fetch_array( $result )) {
        // Print out the contents of the entry 
        ?>
         <option value="<?php echo $row['ID']; ?>"><?php echo $row['ID'] ?></option>

        <?php
            }
            ?>
            </select><br>

            <script type="text/javascript">
        $(document).ready(function() {
            $('#select1').change(getDropdownOptions);
     //     $('#select2').change(getDropdownOptions); // stuck at this point 

        });

        function getDropdownOptions() {
            var val = $(this).val();
        开发者_Python百科    //alert(val);
            // fire a POST request to combos_get.php
            $.post('combos_get.php', { value : val }, populateDropdown, 'html');
            //alert('s');
        }

        function populateDropdown(data) {
            if (data != 'error') {
                $('#select2').html(data);
            }
        }
        </script>
        </div>  
        <div align="left" style="position:relative;left:250px;">
        <select name="select2"  size="10px;" id="select2">
        <option value="--">--</option>
        </select>
        </div>

        <div  style="position:relative;left:450px;top:10px">
        <select name="select3"  size="10px;" id="select3">
        <option value="--">--</option>
        </select>
        </div>

        </body>
        </html>

    **combos_get.php**

<?php
if (!empty($_POST['value'])) {

$val = $_POST['value'];
mysql_connect("localhost", "root", "bob") or die(mysql_error());
mysql_select_db("mydb") or die(mysql_error());

$result = mysql_query("select ID2 from results where ID = \"$val\" ") or die(mysql_error());  

while($row = mysql_fetch_array( $result )) {
$html .= '<option value="1">'.$row['ID2'].'</option>';
}
    die($html);
    }


die('error');

?>


You will more than likely want another handler for this case. It's up to you whether or not the same PHP file can handle the query, however:

$(document).ready(function() {
    $('#select1').change(getDropdownOptions);
    $('#select2').change(getSecondDropdownOptions);
});

function getSecondDropdownOptions() {
    var val = $(this).val();
    $.post('combos_get.php', { value : val }, populateSecondDropdown, 'html');
}

function populateSecondDropdown(data) {
    if (data != 'error') {
        $('#YOURNEXTSELECT').html(data);
    }
}

Common practice is to reuse as much code as possible. I don't have time to refactor since I just got to work but someone is more than welcome to clean this up for him.


In order to do that you need to make populateDropdown use a dynamic target.

something like:

 function getDropdownOptions(event) {
            var e = $(this);
            var val = e.val();

            // fire a POST request to combos_get.php
            $.post('combos_get.php',{ value : val }, function(data){
                     populateDropdowns(data, e);
                }, 'html');

        }

        function populateDropdown(data, e) {
            // e is our originating select

            /* HERE You need to come up with a way to determin the target to populate based on the element that triggered it. for example assuming you only have 3 selects:*/
            switch(e.attr(id)){
              case 'select2':
                var targetSelector = '#select3';
                break;
              case 'select1':
                var targetSelector = '#select2';
                break;
              default:
                var targetSelector = null;
                break;
             }

            if (data != 'error' && targetSelector) {
                $(targetSelector).html(data);
            }
        }
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜