在Ajax中选择更改/提交

debugcn 发表于 Dev

0x58

我有一个通过ajax提交的表单，该表单内部有两个选择。这两个选择使用php从mysql获取数据。

我想要的是仅在选择了第一个选择后才显示第二个选择，我尝试了onchange和onsubmit，但没有使它起作用。ajax脚本不断防止这种情况！我什至尝试将第一个选择vie js的值传递给php，也没有用。

<select class="form-control" name="sel1" onchange="recMarque();" required>
<option value="" hidden selected>Choose</option>
<?php
$r=$conn->query(sprintf("select * from stock")) or die(mysqli_error($conn));    
while ($d=$r->fetch_assoc()){
echo '<option value="' . $d[0] . '"'. ((!empty($sel1))?($d[0]==$sel1)?'selected':null:null) .'>'.$d[0].'</option>';
}
?>
</select>

<script language="Javascript">
  function recMarque(){
    var p1 = $("select[name=sel1]").val();
    alert(p1);
    return p1;
  }
</script>
<?php 
    $s1= "<script>document.writeln(recMarque());</script>"; 
    echo $s1;
?>

<select class="form-control" name="sel2" required>
<option value="" hidden selected>Choose</option>
<?php
if(!empty($s1)){
  $r=$conn->query(sprintf("select * from table where x='$s1'")) or  die(mysqli_error($conn)); 
  while ($d=$r->fetch_assoc()){
  echo '<option value="' . $d[0] . '"'. ((!empty($sel2))?($d[0]==$sel2)?'selected':null:null) .'>'.$d[0].'</option>';
  }
}
?>
</select>

静态html：

<select class="form-control" name="sel1" onchange="recMarque();" required>
    <option value="" hidden selected>Choose</option>
    <option value="AAA">AAA</option>
    <option value="BBB">BBB</option>                                        
</select>
<script language="Javascript">
    function recMarque(){
        var p1 = $("select[name=sel1]").val();
        alert(p1);
        return p1;
    }
</script>
<script>document.writeln(recMarque());</script>                                     

<select class="form-control" name="sel2" required>
    <option value="" hidden selected>Choose</option>
</select>

我感谢您的帮助

0x58

这是我的解决方案

在第一个选择中，我将onchange =“ selChange”放到函数中，如下所示：

<script type="text/javascript">
    function selChange(){
        var val = $("#sel1").serialize();
        $.ajax({
            type: "POST",
            url: "select.php",
            data: val,
            success: function(data) { 
                $('#sel2').html(data);
            }
        }); 
        return false;
    }
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。