我的用户需要从第一个<select>
中选择一个选项,根据他的选择,第二个<select>
应该提供不同的选项。
在许多网站挑选国家/地区后选择州时,您可能已经看到了这一点。
我知道还有其他一百个像这样的问题,但我已经尝试了很多答案而没有任何成功。
所以,这就是我现在所处的位置:
<div class="col-md-2">
<span class="input-group-addon" id="basic-addon1" style="border:solid 1px #CCC; border-radius:4px;">Juzgado: </span>
<select class="form-control" id="juz" name="juz">
<option value="1">Juzgado 1</option>
<option value="2">Juzgado 2</option>
<option value="3">Juzgado 3</option>
</select>
</div>
<div class="col-md-2" id="nomDiv">
<span class="input-group-addon" id="basic-addon1" style="border:solid 1px #CCC; border-radius:4px;">Nominación: </span>
<select class="form-control" id="nom" name="id_juz_nom">
</select>
</div>
然后......我的AJAX
<script type='text/javascript'>
$(document).ready(function(){
$('select[name=juz]').on('change', function() {
var juz = $(this).val()
$.ajax({
url: "tomarNominaciones.php",
type: "POST",
data: { juz.value },
success: function (response) {
document.getElementById('nom').innerHTML= response;
}
});
});
});
</script>
最后这是我的PHP:
<?php
$juz = $_POST['juz'];
include 'conectar.php';
mysql_select_db('juz_nom');
$query = "SELECT * FROM juz_nom WHERE juzgado=\"".$juz."\"";
$result = mysql_query($query);
?>
<span class="input-group-addon" id="basic-addon1" style="border:solid 1px #CCC; border-radius:4px;">Nominación: </span>
<select class="form-control" id="nom" name="id_juz_nom">
<option>Seleccione Nominación</option>
<?php while ($row=mysql_fetch_array($result)) { ?>
<option value=<?php echo $row['id_juz_nom']?>><?php echo $row['nominacion']?></option>
<?php } ?>
</select>
我尝试过很多方法,例如this one和this other one。没有任何成功。
所以,要清楚,我需要做的是:用我的MySQL查询返回的选项填充我的第二个选择。
答案 0 :(得分:0)
更改
data: { juz.value },
到
data: { juz },
并回显HTML
为:
echo "<span class='input-group-addon' id='basic-addon1' style='border:solid 1px #CCC; border-radius:4px;'>Nominación: </span>
<select class='form-control' id='nom' name='id_juz_nom'>
<option>Seleccione Nominación</option>";
while ($row=mysql_fetch_array($result)) {
echo "<option value=$row['id_juz_nom']>$row['nominacion']</option>
</select>";}