jQuery從加載文檔後動態創建的select元素中選擇一個選項值

Question

我創建了一個用於編輯數據庫中的條目的頁面。進入獨特的編號後。的記錄中，詳細信息將顯示在使用jQuery post的表單中。首先在'Cat'選擇框中使用從post請求返回的值選擇值。接下來，在選擇框中，'abcd'將根據'cat'選擇框中的值動態加載。現在我想從中選擇一個與post請求返回的'type'值相匹配的選項值。但是這不起作用。在'貓'選擇框的情況下，它在html中創建並加載文檔加載，但在'abcd'它使用另一個jquery post請求填充。如何從中選擇一個值？ ----- 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()是異步的，但是你想，在選擇填充回調運行之前填充值。你需要在第二次回調中做到這一點。

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

    }); 
});