AjaxでOnchangeを返す方法html select

Question

ajaxで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を使用してそのクライアントに割り当てられたプロジェクトを取得します。私はそれに動作していないアヤックスから返されたHTML上の変更機能に使用する場合

$('#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>'; 
} 
?> 

です。

私はソースコードを見てみると、そこには存在しないことが分かりました。 <div id="response"></div>

しかし、私はフォーム上の結果を見ることができますが、ソースコード内のソースを見ることはできません。

私はそれが表示されていないので、なぜOnchange（）が<select name="project" id="project" class="select2 form-control">のために働いていないのだと思った。

Answer 1

Iを動作するはずですついにこの問題を解決しました。

Basicall私はちょうどget_projects.phpファイルの中の '#projects'のOnclick（）スクリプトを貼り付けました。

だから、今度はそれがajaxから来るたびにjavascriptも持ち込みます。

Answer 2

ajaxを使用すると、後でDOMにブラウザのビューにあるHTMLを追加します。これは、.changeを使用するため、onchangeはブラウザに既に存在する '#company'要素にのみ追加されます。

htmlを追加した後でonchangeをバインドする必要があります。例えば：

$('#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()     
     }); 
    }); 
} 

OR

はまた、DOMにに後から追加された要素では動作しない変化に、変化に使用することができます。要素が存在し、

$("#company").on("change",function(){ 
    console.log("change"); 
}); 

Answer 3

てみコード以下の例のAJAX用と新たな付加要素すでにWICHでので、このコードは動作します。これはうまく動作することを望みます。私が見

$(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); 
     }); 
    }); 
}); 

Answer 4

、アヤックスから復帰されるデータは、オブジェクト
であるあなたは、動的ページのjavascriptまでのマークを追加する場合DIV

Answer 5

に生のコンテンツセットを得るためにそれを解析する必要がありますあなたがPHPで追加したコントロールについてはわかりません。

このように、新たに追加されたコントロール見つけてみてください。

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

が次にあなたが

Answer 6

がテストされていない、あなたの変更方法に発射することができるはずですが、それは

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