Question

我有一个通过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>

感谢您的帮助

Answer 1

为什么在加载巨大的jQuery文件时使用内联javascript？使用jQuery change事件并在jQuery DOM ready事件中包装您的漏洞代码。另外，为什么你要将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;

    });

将负责创建另一个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>

Answer 2

这是我的解决方案

在第一个选择我放置onchange =＆＃34; selChange＆＃34;，功能如下：

<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>

在Ajax中选择更改/提交

2 个答案: