Question

我在我的表单上的ajax返回的html上放置Onchange（）时遇到了问题。

基本上我在select中列出了客户。

<select name="company" id="company">                                                            
   <?php 
       $sqlget1 = "SELECT * FROM clients WHERE 1=1 ORDER BY company ASC;";
       $resget1 = mysql_query($sqlget1);
       while($row1 = mysql_fetch_array($resget1)) {                                                            
   ?>                                                            
       <option value="<?php echo $row1['id']; ?>"><?php echo $row1['company']; ?></option>                                                                                                                        
   <?php
       }
   ?>
</select>

当有人选择客户端时，我使用Ajax来获取分配给该客户端的项目。

$('#company').change(function() {                        
    var selectedProject = $("#company option:selected").val();
    $.ajax({
        type: "POST",
        url: "get_projects.php",
        data: { projects : selectedProject } 
    }).done(function(data){
        $("#response").html(data);
    });
});

它会返回

<div id="response"></div>

get_projects.php的代码是

<?php
include('inc.php');
if(isset($_POST["projects"])) {      
    $projects = $_POST["projects"];    
    $sqlget2 = "SELECT * FROM projects WHERE cid=\"$projects\" ORDER BY pname ASC;";        
    $resget2 = mysql_query($sqlget2);
    echo '<select name="project" id="project" class="select2 form-control">';
    echo '<option value="">-- Select a project --</option>';
    while($row2 = mysql_fetch_array($resget2)) {                                                            
?>                                                            
       <option value="<?php echo $row2['id']; ?>" pstatus="<?php echo $row2['pstatus']; ?>" ptype="<?php echo $row2['ptype']; ?>"><?php echo $row2['pname']; ?></option>                                                                                                                        
<?php
    }
    echo '</select>';
 }
?>

现在，当我在ajax返回的html上使用更改功能时，它无效。

我试图查看源代码并发现它不存在。它只显示<div id="response"></div>

但我可以在表单上看到结果，但无法在源代码中看到源代码。

因此我认为这就是为什么Onchange（）不适用于<select name="project" id="project" class="select2 form-control">，因为它没有显示。

Answer 1

当你使用ajax时，你稍后会在DOM（浏览器视图）中添加一段html，因为你使用.change，onchange只会被添加到浏览器中已存在的'#company'元素中。

添加html后需要绑定onchange。例如：

test[0]["value"] = false

OR

您还可以使用on change，on change确实可以使用稍后添加到dom的元素。所以这段代码适用于已经存在的元素和新添加的元素，例如ajax

$('#company').change(function() {        
    onCompanyChange()                
});

function onCompanyChange(){
    var selectedProject = $("#company option:selected").val();
    $.ajax({
        type: "POST",
        url: "get_projects.php",
        data: { projects : selectedProject } 
    }).done(function(data){
        $("#response").html(data);
        $('#company').change(function() {        
            onCompanyChange()                
        });
    });
}

Answer 2

我看到，从Ajax返回的数据是对象
您应该解析它以将原始内容设置为DIV

Answer 3

当您动态添加标记到页面时，javascript不知道您通过php添加的控件。

尝试像这样找到新添加的控件：

var select = document.getElementById('project');

然后你应该可以解雇你的改变方法

Answer 4

未经测试，但应该可以使用

<?php
include('inc.php');
if(isset($_POST["projects"]))
{
$projects = $_POST["projects"];    
$varOut = "";
$sqlget2 = "SELECT * FROM projects WHERE cid=\"$projects\" ORDER BY pname ASC;";        
$resget2 = mysql_query($sqlget2);
$varOut .= '<select name="project" id="project" class="select2 form-control">';
$varOut.= '<option value="">-- Select a project --</option>';
while($row2 = mysql_fetch_array($resget2))
{                                                            
    $varOut.= "<option value=" . $row2['id'] . " pstatus=". $row2['pstatus']. ">ptype=".$row2['ptype']."><".$row2['pname']."></option>";                                                                                                                       
}
$varOut.= '</select>';
}
echo $varOut;
?>

Answer 5

我终于解决了这个问题。

Basicall我刚刚粘贴了#c;＃projects＆＃39;的Onclick（）脚本。在 get_projects.php 文件中。

所以现在每当它来自ajax时它也会带来javascript。

Answer 6

尝试以下代码。希望这很好。

$(document).ready(function() {
    $(document).on('change', '#company', function() {
        var selectedProject = $("#company option:selected").val();
        $.ajax({
            type: "POST",
            url: "get_projects.php",
            data: { projects : selectedProject } 
        }).done(function(data){
        $("#response").html(data);
        });
    });
});

如何在Ajax上放置Onchange返回html选择

6 个答案: