javascript - 在 Ajax 中选择更改/提交

Question

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

我想要的是仅在选择第一个选择时才显示第二个选择，我尝试过 onchange 和 onsubmit 但没有让它工作。 ajax 脚本不断阻止这种情况发生!我什至尝试将第一个 select 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>

感谢您的帮助

Answer 1

当你已经加载了巨大的 jQuery 文件时，为什么还要使用内联 javascript？使用 jQuery change 事件并将您的洞代码包装在 jQuery DOM 就绪事件中。另外，为什么要将 PHP 与标记和 javascript 混合在一起，这与 AJAX 目的和您的目标描述相矛盾。您希望在第一个 select 选择后显示第二个 select，并且内容取决于所选值(需要服务器端获取)，然后将 XMLHTTPRequest 发送到单独的(小)文件并获取响应。

$('select[name=sel1]').change(function(e) {

    e.preventDefault(); 

    var value = $('select[name=sel1] option:selected').val(); 
    var text = $('select[name=sel1]',this).text();
    var urlForSelect2 = $('select').attr('data-url');

    // make an AJAX call and send value, text, and all your needed variable alongside 

    $.ajax({
                        type: "GET",
                        url: urlForSelect2,
                        dataType: 'html',
                        data: ({value: value, text: text}),
                        success: function(data){
                        $('select[name=sel1]').append(data);
    });


        return false;

    });

并将负责创建的 php 与另一个 url 分开到另一个文件中(在本例中为 urlForSelect2):

 <option value="" hidden selected>Choose</option>
    <?php

// Get the values sent along AJAX request using PHP $_GET, let's say $s1
    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 class="form-control" name="sel1" data-url="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>

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