選択枠のオートフィルフォームフィールド

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>を表す各ノードを、サーバー側から持ってきた対応する配列アイテムで埋めなければなりません。 Ex。

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

何が欲しいのは、あなたがあなたの現在のオプションを反復し、どちらかそれを「選択」属性を適用したり、インデックスとして<select>さんのselectedIndexを設定する必要があなたの<select>にすでにある<option>を選択するのであれば選択したいオプションのたとえば、

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