jQueryドキュメントがロードされた後に動的に作成されるselect要素からオプション値を選択します。

Question

データベースのエントリを編集するためのページを作成しました。ユニークな番号を入力した後。詳細は、jQueryポストを使用してフォームに表示されます。最初の 'Cat'セレクトボックスの値は、ポストリクエストから返された値で選択されます。次に、選択ボックスで、 'cat'選択ボックスの値に応じて 'abcd'が動的に読み込まれます。今私は、これから1つのオプション値を選択して、ポストリクエストによって返される 'type'値に一致させたいと思います。しかし、これは動作していません。 'Cat' selectボックスの場合はhtmlで作成され、ドキュメントの読み込みが行われますが、 'abcd'では別のjquery投稿要求を使用して読み込まれます。これから価値を選択する方法を教えてください。 -----検索用のフォーム要素が作成されたページ内のHTML ------

<form id="request_search" name="request_search" > 
<fieldset class="request_fs"> 

<br/> 
USIN: <input type="text" name="usin" id="usin" onblur="this.value=this.value.toUpperCase()"/> 

<input id="Submit" name="Submit" type="Submit" value="Get Data" /> 
</fieldset> 
    </form> 

    <div id="edit_form"> 
    <form id="sampleentry" name="sampleentry" > 
    <fieldset> 
    <legend>Sample Data Entry</legend> 
    <label for="loc">Location</label> 

    <select name="loc" id="loc"><option value="">-----Select Location----</option> 
    <?php 
    $db=mysql_select_db($database_hari,$hari) or die("could not connect"); 
$secsql= "SELECT location, site FROM villages ORDER BY location"; 
    $result_sec=@mysql_query($secsql) or die(mysql_error()); 

       while($row2=mysql_fetch_array($result_sec)) 
         { echo"<option value='".$row2['site']."-".$row2['location']."'>".$row2['location']."</option>";} 

    ?> 
    </select> 
    <br /> 
    <br /> 
    <label for="cat">Category</label> 
    <select name="cat" id="cat"> 
    <option value="">--Select Category--</option> 
    <option value="atmos">Atmospheric</option> 
    <option value="aqua">Aquatic</option> 
    <option value="fmd">Diet &amp;Animal Products</option> 
    <option value="ter">Terrestrial</option> 
    <option value="thy">Thyroid</option> 
    </select> 
    <br /> 
    <br /> 
    <label for="abcd">Type</label> 
    <select name="abcd" id="abcd" ><option value="">Select Category First</option></select> 
    <br /><br /> 
    <span id="measurement"></span> 


    <label for="start">Date</label> 

    <input type="text" id="datepicker" name="datepicker" value="<?php echo $dateindian; //echo date('d-m-Y'); ?>" /><input type="hidden" id="stddate" value="<?php echo $dateus; //echo date('d-m-Y'); ?>"/> 

     <br /> 

     <span id="datepanel"> <br /><label for="start">To Date</label><input type="text" id="datepicker2" name="datepicker2" value="<?php echo $dateindian; //echo date('d-m-Y'); ?>" /><input type="hidden" id="to_dt" value="<?php echo $dateus; //echo date('d-m-Y'); ?>"/><br /></span> 
     <br /> 
     <!--<label for="sampleid">Ref. if An</label> <input name="sampleid" /> <br />--> 
     <br /> 
    <label for="usin">USIN</label> 
    <input name="usin" disabled="disabled" class="usin" /> 
    <br /><br /> 
    <label for="user">User</label> 
     <input name="user" disabled="disabled" value= "<?php echo $_SESSION['EMPNO']; ?>" /> 
     <br /><br /> 
     <span class="chek"> 
     <input class="sam" name="samples" id="cs" type="checkbox" value="cs"/>Cs (RCA) 
    <input class="sam" name="samples" id="sr" type="checkbox" value="sr"/>Sr (RCA) 
    <input class="sam" name="samples" id="3h" type="checkbox" value="h3"/>3H 
    <input class="sam" name="samples" id="gamma" type="checkbox" value="gamma"/>Gamma Spec 
    <input class="sam" name="samples" id="alpha" type="checkbox" value="ga"/>Gross a 
    <input class="sam" name="samples" id="beta" type="checkbox" value="gb"/>Gross ß 
    <input class="sam" name="samples" id="iod" type="checkbox" value="iod"/>Iodine(by BCS) 
    </span> 
    <br /><br /> 
     <div align="center"><input type="submit" name="submit" value="Submit" /></div> 
    </fieldset> 
    </form> 

-----スクリプトとフィル-----

jQuery('#request_search').submit(function(e){ 
    e.preventDefault(); 
    var usin=jQuery("#usin").val(); 

    jQuery.post("scripts/get_sample_register.php", {"usin":usin}, function(data) { 
     jQuery('#edit_form').show(); 

     var site=usin.substring(2,3); 
     jQuery("#loc").val((site+'-'+data.location)); 
     jQuery("#cat").val(data.cat); 


     var cate = jQuery('[name="cat"]').val(); 
     var temp = ''; 
     jQuery.post("insert_types.php", {"id": data.cat}, function(data){  
      jQuery('[name="abcd"]').html(data); 
     }); 
     jQuery("#abcd").val(data.type);  
    }); 

-----「ABCD」---------

<?php 
require_once('Connections/hari.php'); 

$id=$_POST['id']; 

$db=mysql_select_db($database_hari,$hari); 
$sql= "select source from matrix where type='$id'"; 
$result=mysql_query($sql); 
echo "<option value=''>---Select Type----</option>"; 
while($row=mysql_fetch_array($result)){ 

    echo "<option value='".$row['source']."'>".$row['source']."</option>"; 
} 
?> 

Answer 1

jQuery.post()を取り込むためのスクリプトは非同期ですが、オプションでいっぱいにコールバックが実行される前に値を移入しようとしています。 2番目のコールバックでそれを行う必要があります。

jQuery('#request_search').submit(function(e){ 
    e.preventDefault(); 
    var usin=jQuery("#usin").val(); 

    jQuery.post("scripts/get_sample_register.php", {"usin":usin}, function(data) { 
     jQuery('#edit_form').show(); 

     var site=usin.substring(2,3); 
     jQuery("#loc").val((site+'-'+data.location)); 
     jQuery("#cat").val(data.cat); 


     var cate = jQuery('[name="cat"]').val(); 
     var temp = ''; 
     jQuery.post("insert_types.php", {"id": data.cat}, function(data2){ 
      jQuery('#abcd').html(data2); 
      jQuery("#abcd").val(data.type);  
     }); 

    }); 
});