根据选择的值添加/显示动态表单字段

Question

我正在使用Jquery Mobile 创建一个弹出表单，用于显示供用户选择的 select 语句。我正在使用ajax使select语句动态化。我已经成功地展示了数据并创建了新的 select 语句，但它似乎格式不正确。

表格之前和之后的图片: Picture of The Form with before and After 弹出表单代码: Popup Form Code

<?php
$q = intval($_GET['q']);

include_once('session.php');
include_once('dbConnect.php');

$sql="SELECT Enrollment.c_id, Enrollment.s_id, users.f_name, users.l_name
FROM Enrollment
INNER JOIN users ON Enrollment.s_id = users.s_id
WHERE c_id=$q";

$result = mysqli_query($dbc, $sql);

echo "<label for='selectuser' class='select'>Select user:</label>";
echo "<select name='selectuser' id='selectuser' data-native-menu='false'>";
echo "<option>Choose Users:</option>";
echo "<option value='instructor'>All Instructors</option>";
echo "<option value='students'>All Students</option>";

while($row = mysqli_fetch_array($result))
  {
        $s_id = $row['s_id'];
        $f_name = $row['f_name'];
        $l_name = $row['l_name'];
        echo "<option value='$s_id'>$f_name $l_name</option>";
  }
echo "</select>";
?>

- user3404634

Answer 1

更容易的方法是按照以下方式进行：

HTML

首先，从一开始就将所有选择框放在您的HTML中：

<select name="selectclass" id="selectclass" data-native-menu="false">
   <option value='default'>Select Class:</option>
   <?php echo $allClassOptions; ?>
</select>
<select name="selectuser" id="selectuser" data-native-menu="false">
   <option value='default'>Select User:</option>
   <?php echo $allUsers; ?>
</select>

为没有JavaScript支持的用户提供替代方案是良好的实践（优雅降级）。

Javascript

接下来，在您的JavaScript文件中，隐藏应在开始时隐藏的输入字段。将事件处理程序绑定到第一个选择字段的更改事件，并使用Ajax调用填充第二个选择字段的选项字段。

var selectElement = $("#selectuser");
selectElement.hide();

$("#selectclass").on("change", function(){
    var selectedClass = this.value;

    if(selectedClass != "default"){
       selectElement.show();

       $.ajax({
           type: "POST",
           url: "getdatabaseresults.php",
           data: {"class": selectedClass },
           success: function(result){
                //remove old options
                selectElement.empty();

                //add new options
                selectElement.append(result);
           }
       });
    };
});

PHP

在你的 PHP 文件中，处理 Ajax 调用并返回所需的结果：

<?php

if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) == "xmlhttprequest"){
    //this is an Ajax call!

    $selectedClass = $_POST["class"];
    $options = "<option value='default'>Select User:</option>";

    //do whatever you want with the data
    //database calls and whatnot
    $stmt = mysqli_prepare($dbc, "SELECT * FROM users WHERE c_id = ?");
    mysqli_stmt_bind_param($stmt, "s", $selectedClass);
    mysqli_stmt_execute($stmt);
    mysqli_stmt_bind_result($stmt, $row);
    while(mysqli_stmt_fetch($stmt)) {
        $user = $row['username'];
        $options.= "<option value='$user'>$user</option>";
    }
    mysqli_stmt_close($stmt);

    echo $options;
}
?>

这个php文件可以通过扩展（例如使用switch()）来进行不同的ajax调用。

注意：有许多不同的方法可以实现这一点，这只是一个示例。

- Praxis Ashelin

---

顺便提一下，你多次调用$("#selectuser")，可以通过将其缓存到一个变量中而不是重新选择来稍微改进它。 - rlemon

Answer 2

我认为问题在于您没有在循环后关闭select标签。此外，建议只在最后进行一次写入。代码应如下：

<?php
$q = intval($_GET['q']);

include_once('session.php');
include_once('dbConnect.php');

$sql="SELECT Enrollment.c_id, Enrollment.s_id, users.f_name, users.l_name
FROM Enrollment
INNER JOIN users ON Enrollment.s_id = users.s_id
WHERE c_id=$q";

$result = mysqli_query($dbc, $sql);

$text = "<label for='selectuser' class='select'>Select user:</label>";
$text .= "<select name='selectuser' id='selectuser' data-native-menu='false'>";
$text .= "<option>Choose Users:</option>";
$text .= "<option value='instructor'>All Instructors</option>";
$text .= "<option value='students'>All Students</option>";

while($row = mysqli_fetch_array($result))
{
    $s_id = $row['s_id'];
    $f_name = $row['f_name'];
    $l_name = $row['l_name'];
    $text .= "<option value='$s_id'>$f_name $l_name</option>";
}
$text .= "</select>"
echo $text
?>

- imtheman

---

关闭选择器做得好。但显然这并没有解决它。 - user3404634

也许与你的 CSS 有关。你能发布一下该元素的 CSS 吗？ - imtheman

我正在使用jQuery Mobile CSS。 - user3404634

我明白了。第一个看起来运行正常。你能贴出那个代码吗？这样我就能更全面地了解问题了。 - imtheman

我认为这与div有关。 - user3404634

我在这里的代码中没有看到div，但是在另一个链接中有。也许这就是你的问题。或者你只是没有发布所有的代码。 - imtheman