Question

我正在处理一个表单，其中更改一个“select”元素会修改另一个“select”元素的值。这两个元素的值来自MSSQL数据库。实现可以实现此目的的代码的最佳方法是什么？

我可以通过两种方式来实现它。

将表存储到javascript变量中，并使第一个元素的onchange事件修改第二个元素。
向页面发送GET请求并重新加载，使用PHP修改第二个元素。

我不喜欢第一种方法，因为将数据库从PHP端存储到javascript端看起来很麻烦，而且非常麻烦。我也不喜欢第二种方式，因为重新加载页面会破坏用户体验并使他不得不再次向下滚动。

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

Answer 2

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

执行此操作的最佳方法是使用JSON（JavaScript Object Notation）。在这种情况下，您将使用Javascript对PHP页面进行AJAX调用，并且该PHP页面将在查询字符串中使用一个参数来表示第一个select元素的值。这样，您可以调用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);

Answer 3

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

此示例使用两个文件：

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

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

PROCESS.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 - 用户从下拉列表中选择“工作人员” 湾change（）事件触发，获取（“w”）的值，并将其发送到process.php
C。 PROCESS.PHP在其w数组中接收名为$_POST[]的变量键，存储在$w中 d。 PROCESS.PHP对所选工作人员进行MySQL查找（值$w）
即PROCESS.PHP在一个名为$ ret的var中构造一些HTML，然后将它ECHO输出 F。 TEST.PHP在$ .ajax成功函数中接收HTML字符串 G。 TEST.PHP调用接收的数据data（原始性为-1）
H。 TEST.PHP将收到的HTML注入ID为“laDiv”的DIV

希望有所帮助。

Answer 4

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

根据表单输入从SQL数据库中提取数据

4 个答案: