使用 JQuery 与 mySQL 混淆答案

【问题标题】：using JQuery with mySQL confusion使用 JQuery 与 mySQL 混淆
【发布时间】：2009-12-08 13:15:11
【问题描述】：

嗨，我有这样的代码。我正在做的是用 MySQL 数据填充第一个选择，并基于第一个选择，使用 jQuery，我正在填充第二个。现在，我的问题是，我可以使用相同的 combos_get.php 来填充基于来自第二个选择的用户选择的另一个选择吗？

是的，那么请看评论“卡在这一点上”，我对如何获取第三个选择的数据感到困惑。

    <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();
            //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');

?>

【问题讨论】：

标签： php mysql jquery

【解决方案1】：

您很可能需要另一个处理程序来处理这种情况。但是，同一个 PHP 文件是否可以处理查询取决于您：

$(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);
    }
}

通常的做法是尽可能多地重用代码。我刚开始工作，没有时间重构，但非常欢迎有人为他清理这个。

【讨论】：

我像你说的那样创建了第二个处理程序，但是当我从第二个选择中选择任何选项时，第二个选择中的内容将被删除，第三个中没有添加任何内容。
现在一切正常，只有在 Firefox 中，在 IE 中，内容正在被删除。奇怪的！！。在 IE 中处理 jquery 有什么错误吗？
内容是什么？您打算将选项注入的选择？选择不正确？全选？整个文档？
你应该把 cballou 和答案联系起来 :-)

【解决方案2】：

为此，您需要使 populateDropdown 使用动态目标。

类似：

 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);
            }
        }

【讨论】：

很有趣，但是如何声明 $('#select1').change(getDropdownOptions);是 $('#select1').change(getDropdownOptions(event));
no... 事件由 jQuery 自动传入。它是一个 jquery.Event 对象。你实际上甚至不能使用它..我只是为了完整性而将它包括在内。您可以查看docs.jquery.com/Events/jQuery.Event 了解有关事件对象的更多详细信息。