爲選擇框自動填充表單域

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