我需要在表单中制作一个动态依赖下拉菜单,所以我找到了这个使用 JS 自动提交功能的解决方案:
function autoSubmit()
{
var formObject = document.forms['dados'];
formObject.submit();
}
然后我在第一个下拉列表中使用 onchange 事件来调用自动提交函数:
<label>Campus:</label>
<select name="campus" onchange="autoSubmit();">
<option VALUE="null"></option>
<?php
//Popula a lista com os cursos do DB
$sql = "SELECT id,nome FROM campus";
$countries = mysql_query($sql,$conn);
while($row = mysql_fetch_array($countries))
{
if($row[nome]==$campus)
echo ("<option VALUE=\"$row[nome]\" selected>$row[nome]</option>");
else
echo ("<option VALUE=\"$row[nome]\">$row[nome]</option>");
}
?>
</select>
这样,元素“campus”将被设置为在第二个下拉 SELECT 语句中使用:
$campus = $_POST['campus'];
...
<label>Curso:
<span class="small">curso corrente</span>
</label>
<select name="curso">
<option VALUE="null"></option>
<?php
$consulta2 = "SELECT curso FROM campus_cursos WHERE campus = \"" . $campus . "\"";
$cursoslista = mysql_query($consulta2,$conn);
while($row = mysql_fetch_array($cursoslista))
{
echo ("<option VALUE=\"$row[curso]\">$row[curso]</option>");
}
?>
</select>
这段代码正在工作,但问题是,通过这种方式,我无法在表单中设置操作属性,因为如果我每次第一个下拉列表更改时都这样做,它将重定向到操作的 URL。这是有效的表单:
<form name="dados" method="POST" onsubmit="return validar();">
没有操作属性,我无法使用提交按钮将所有其他元素的数据发送到正确的 URL。有办法吗?
最佳答案
您应该使用 Ajax 代码来填充第二个下拉列表值。
在表单页面上:
<label>Campus:</label>
<select name="campus" id="campus">
<option VALUE="null"></option>
<?php
//Popula a lista com os cursos do DB
$sql = "SELECT id,nome FROM campus";
$countries = mysql_query($sql,$conn);
while($row = mysql_fetch_array($countries))
{
if($row[nome]==$campus)
echo ("<option VALUE=\"$row[nome]\" selected>$row[nome]</option>");
else
echo ("<option VALUE=\"$row[nome]\">$row[nome]</option>");
}
?>
</select>
<label>Curso:
<span class="small">curso corrente</span>
</label>
<select name="curso" id="curso">
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#campus').change(function(){
var campusName = $(this).val();
$('#curso').load('generateCurso.php?campus='+campusName);
});
});
</script>
编写一个 PHP 文件,名为generateCurso.php
<?php
$campus = $_GET['campus'];
$consulta2 = "SELECT curso FROM campus_cursos WHERE campus = \"" . $campus . "\"";
$cursoslista = mysql_query($consulta2,$conn);
?>
<option VALUE="null"></option>
<?php
while($row = mysql_fetch_array($cursoslista))
{
echo ("<option VALUE=\"$row[curso]\">$row[curso]</option>");
}
?>
关于javascript - 如何使用表单中的action属性管理自动提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19411038/