0

我正在研究一种形式，其中更改一个“选择”元素会修改另一个“选择”元素的值。这两个元素的值都来自 MSSQL 数据库。实现代码的最佳方法是什么？

我可以想到两种方法来做到这一点。

  1. 将表存储到 javascript 变量中，并使第一个元素的 onchange 事件修改第二个元素。

  2. 向页面发送 GET 请求并重新加载它，使用 PHP 修改第二个元素。

我不喜欢第一种方法，因为将数据库从 PHP 端存储到 javascript 端似乎有点 hacky 并且真的很麻烦。我也不喜欢第二种方式，因为重新加载页面会破坏用户体验，让他不得不再次向下滚动。

4

4 回答 4

1

您应该使用AJAX来提取数据并填充第二个选择元素。简而言之，AJAX 只是发生在幕后的一个单独的页面请求。您可以使用它来加载简单的 HTML 页面或部分 HTML 页面并将其显示在 DOM 元素中，或者您可以使用它来动态检索结构化数据。

最好的方法是使用 JSON（JavaScript Object Notation）。在这种情况下，您将使用 Javascript 对 PHP 页面进行 AJAX 调用，并且该 PHP 页面将在查询字符串中采用一个参数，该参数表示第一个选择元素的值。这样，您将调用您的 MSSQL 数据库以获取第二个选择的所有相应选项，然后将它们回显。反过来，您用来发出 AJAX 请求的 Javascript 可以解析响应并将其解释为 JavaScript 对象字面量，从而允许您循环遍历结果并使用它们做您想做的事情。

这是一个示例（我使用的是 jQuery，因为它使 AJAX 变得非常简单）。

在表单页面的顶部：

$(document).ready(function() {
    $('#select1').change(function() {
        var select1val = $(this).val();
        $.getJSON('/path/to/response.php', 'select1=' + select1val, function(response) {
             $('#select2').empty();
             if(response) {

                for(var option in response) {
                    $('<option/>').val(option.value).html(option.label).appendTo($('#select2'));
                }
             }
        });
     });
});

然后您的 response.php 页面应如下所示：

<?php
$select1 = $_GET['select1'];
// Do validation here, to make sure it's a legitimate value for select1. Never trust the
// user input directly.

// Replace this with whatever code you use to make DB queries.
$options = $mydb->query("SELECT value,label FROM select2_options WHERE select1_value=?", $select1);

echo json_encode($options);
于 2013-06-20T21:52:41.840 回答
1

Ajax如果您不想重新加载页面，请使用。阅读有关AJAX的更多信息 

$('#select1').change(function() {
    var value = $(this).val();
    var dataString = 'id='+ value;

    if(value != '') 
    {
        $.ajax({
               type: "POST",
               url: "fetchOptionsForSelect2.php",
               data: dataString,
               success: function(html) {
                     $('#select2').html(html);
               }
        });
    } 
    else 
    {
        //reset select2
        $('#select2').html("<option value=''>Select value from select1 first</option>");
    }
});
于 2013-06-20T21:49:05.777 回答
1

这是一个独立的示例，可以满足您的需求。一开始可能看起来很复杂，但是通过 jQuery 实现的 AJAX 非常简单。

此示例使用两个文件：

1) TEST.PHP - 包含 javascript/AJAX 和带有<select>控件的 HTML
2) PROCESS.PHP - 从 test.php 接收数据（通过 AJAX），在该数据上运行 MySQL 查找，将 HTML 返回给 TEST.PHP

测试.PHP

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#workers").change(function(event) {
                    var w = $(this).val();
//alert('Value of w is: ' + w);
//return false;
                    $.ajax({
                        type: "POST",
                        url: "process.php",
                        data: 'worker=' + w,
                        success:function(data){
//alert(data);
                            $('#laDiv').html(data);
                        }
                    }); //END ajax
                });
            }); //END $(document).ready()

        </script>
    </head>
<body>

Worker:  
<select  id="workers">
    <option>Roy</option>
    <option>John</option>
    <option>Dave</option>
</select>

<div id="laDiv"></div>

</body>
</html>

进程.PHP

<?php

$w = $_POST['worker'];

$ret = '
    Fruit Options: 
    <select id="fruitopts" name="Select2">
';

if ($w == 'Roy'){
    $ret .= '
        <option>Apples</option>
        <option>Oranges</option>
        <option>Pears</option>
    ';
}else if ($w == 'John') {
    $ret .= '
        <option>Peaches</option>
        <option>Grapes</option>
        <option>Melons</option>
    ';
}else if ($w == 'Dave') {
    $ret .= '
        <option>Nut</option>
        <option>Jelly</option>
    ';
}

$ret .= '</select>';

echo $ret;

这是发生的事情：

一个。TEST.PHP - 用户从下拉“工人”中选择选项
b。change() 事件触发，获取 ("w") 的值，并将其发送到 process.php
c。PROCESS.PHP 接收一个w在其$_POST[]数组中命名的变量键，存储在$w
d 中。PROCESS.PHP 对选定的 worker 进行 MySQL 查找（值为$w）
e。PROCESS.PHP 在名为 $ret 的 var 中构造一些 HTML，然后将其 ECHO 输出
f。TEST.PHP 在 $.ajax 成功函数
g 中接收 HTML 字符串。TEST.PHP 调用接收到的数据data（-1 表示原创性）
h。TEST.PHP 将接收到的 HTML 注入 id="laDiv" 的 DIV

希望有帮助。

于 2013-06-20T21:56:45.380 回答
0

使用http://www.appelsiini.net/projects/chained

<script src="jquery.chained.min.js"></script>

<select id="mark" name="mark">
    <?php
         foreach($select1_opt as $opt)
        {
            echo "<option value=$opt>$opt</option>";
        }
    ?>
    </select>
    <select id="series" name="series">
    <?php
        foreach($select2_opt as $opt)
        {
            echo "<option value=$opt>$opt</option>";
        }
    ?>
</select>
于 2013-06-20T22:02:59.407 回答