jQuery从加载文档后动态创建的select元素中选择一个选项值

时间:2017-02-10 07:47:59

标签: jquery

我创建了一个用于编辑数据库中条目的页面。进入独特的没有。记录中,详细信息显示在表单中,使用jQuery post。首先在“Cat'使用从post请求返回的值选择选择框值。接下来,在一个选择框中,abcd'是根据“猫”中的值动态加载的。选择框。现在我想从中选择一个匹配'类型'的选项值。邮寄请求返回的值。但这不起作用。在Cat' Cat'选择框,它是在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);     
    });

-----用于填充&#39; abcd&#39; ---------

的脚本
<?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>";
}
?>

1 个答案:

答案 0 :(得分:0)

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

    });
});