Javascript 根据选择值添加/显示动态表单字段
我正在使用jquerymobile创建一个弹出表单,显示select语句供用户选择。我使用ajax使select语句动态化。我已经获得了要显示的数据,并创建了一个新的select语句。它的格式似乎不正确Javascript 根据选择值添加/显示动态表单字段,javascript,php,jquery,Javascript,Php,Jquery,我正在使用jquerymobile创建一个弹出表单,显示select语句供用户选择。我使用ajax使select语句动态化。我已经获得了要显示的数据,并创建了一个新的select语句。它的格式似乎不正确 我相信问题在于循环后没有关闭select标记。此外,建议在最后只写一次。因此: <?php $q = intval($_GET['q']); include_once('session.php'); include_once('dbConnect.php'); $sql="SELECT
我相信问题在于循环后没有关闭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
?>
一种更简单的方法是: 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>
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文件可以通过一个开关进行扩展,这样它就可以用于不同的ajax调用
注意:有许多不同的方法可以实现这一点,这只是一个例子。关闭该选择很好。但是很明显,它并不能解决这个问题,也许这与你的CSS有关。你能发布这个元素的CSS吗?我正在使用jquery移动cssI。第一个似乎很好用。你能把那个的密码贴出来吗?因此,我可以更全面地了解这个问题。我认为这与divas有关。作为旁注,您多次调用$selectuser,这可以通过将其缓存到变量而不是重新选择来稍微改进。
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
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;
}
?>