为选择框自动填充表单域

Question

我有这个jquery.ajax表单，它填充数据库中的数据，并在按钮单击时自动填充表单域。 当表单字段为文本类型时，它工作得很好 但是当表单字段是选择框时它不会自动填充。 这里是我到目前为止的代码..

<script type="text/javascript"> 
    $(document).ready(function() { 
     function myrequest(e) { 
      var lead_id = $('#lead_id').val(); 
      $.ajax({ 
       method: "GET", 
       url: "/pdp/fetch-client-data/", 
       dataType: 'json', 
       cache: false, 
       data: { 
        lead_id: lead_id 
       }, 
       success: function(responseObject) { 
        alert('success'); 
        $('#client_name').val(responseObject.client_name); 
        $('#state').val(responseObject.state); 

       }, 
       failure: function() 
       { 
        alert('fail'); 
       } 
      }); 
     } 

     $('#fetchFields').click(function(e) { 
      e.preventDefault(); 
      myrequest(); 
     }); 
     $("#lead_id").bind("change", function(e) 
     { 
      myrequest(); 
     }); 
    }); 

    </script> 

    <table width="600" align ='center'> 
    <form action ='<?php echo $SERVER['PHP_SELF']; ?>' method='post'> 

     <tr> 
      <td>   
       <label for="lead_id">Lead id: </label> 

       <input type="text" name="lead_id" id="lead_id"> 

       <button id="fetchFields">Fetch</button> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Agent: <select name="agent"> 
        <option value="">[Select]</option> 
        <?php foreach($this->agent_query as $agent){ ?> 
        <option value="<?php echo $agent['id']; ?>"><?php echo $agent['name'];?></option> 
        <?php } ?> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <label for="client_name">Client Name: </label> 
       <input type="text" name="client_name" id="client_name"> 
      </td> 
     </tr> 
     <tr>  
      <td> 
       <label for="state">State: </label> 
       <select name="state" id='state'> 
       <option id='state' value='1'></option> 
       </select> 
      </td> 
     </tr> 
      <tr> 
      <td> 
       # of Policies: 
       <select name="policies"> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
       </select> 
      </td> 
      </tr>  
     <tr> 
      <td> 
       <input type="submit" value="NEXT" name="submit"> 
      </td> 
     </tr> 

    </form> 
    </table> 

Answer 1

当你说

但是当表单字段是一个选择框

你的意思是，以填补它不会自动填充<select>带有来自服务器端的数据列表，或者选择已在<select>上的<option>？

如果你的情况是你想要填写<select>那么你必须创建每个节点代表每个<option>填充其相应的数组项从服务器端。防爆。

$('#state>option').remove(); 
$.ajax(
    ... 
    success: function(data){ 
    for(var i=0; i<data.array.length; i++){ 
     $('#state').append($('<option>') 
     .attr('value', data.array[i].value) 
     .html(data.array[i].name)); 
    } 
    } 
); 

如果你想要的是选择一个<option>这是已经在你的<select>，那么你需要遍历当前的选项，要么运用它的“选择”属性或设置<select>的的selectedIndex为指标您想要选择的选项。例如：

$.ajax(
    ... 
    success: function(data){ 
    $('#state>option>option').each(function(i, elm){ 
     if($(elm).attr('value').indexOf(data.state) >= 0){ 
     $(elm(.attr('selected', 'selected'); 
     } 
    }); 
    } 
);