2016-11-17 7 views
4

私はhtmlページ上でphpからajaxを使ってAPIからデータを取得しようとしましたが、直接リンクしようとしたときに正常に動作しましたが、ダウン、ここで...ajaxはPHPのドロップダウンリストの後に応答しません

をAJAXを呼び出すことができなかったようにそれがあることは私のhtml

<head> 
    <link rel="stylesheet" type="text/css" href="css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="css/skeleton.css"> 
     <script type="text/javascript" src="js/jquery-2.1.3.min.js"> 
     </script> 
     <script type="text/javascript" src="js/script.js"></script> 
     <title>Penggunaan API RajaOngkir | IDMore</title> 
</head> 
<body> 
    <div class="container"> 
    <div class="row"> 
     <br /> 
     <div class="twelve columns"> 
     <h1>Hitung Ongkos Kirim</h1> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="twelve columns"> 
     <h5>Masukan Data</h5> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="two columns">Asal 
     <br /> 
     <select id="oriprovince"> 
     <option>Province</option> 
     </select></div> 
     <div class="two columns"> 
     <br /> 
     <select id="oricity"> 
      <option>Kota</option> 
     </select> 
     </div> 
     <div class="two columns">Tujuan 
     <br /> 
     <select id="desprovince"> 
     <option>Provinsi</option> 
     </select></div> 
     <div class="two columns"> 
     <br /> 
     <select id="descity"> 
      <option>Kota</option> 
     </select> 
     </div> 
     <div class="two columns">Layanan 
     <br /> 
     <select id="service"> 
     <option>JNE</option> 
     <option>POS</option> 
     <option>TIKI</option> 
     </select></div> 
     <div class="two columns"> 
     <br /> 
     <button id="btncheck">Cek Harga</button> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="twelve columns"> 
     <h5>Harga</h5> 
     </div> 
     <hr /> 
     <table class="twelve columns"> 
     <tr> 
      <th>Servis</th> 
      <th>Deskripsi Servis</th> 
      <th>Lama Kirim (hari)</th> 
      <th>Total Biaya (Rp)</th> 
     </tr> 
     <span id="resultsbox"> 
      <tr> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
      </tr> 
      <tr> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
      </tr> 
     </span> 
     </table> 
    </div> 
    </div> 
</body> 

は、ここに私のjavascriptのです。

$(document).ready(function() { 
    loadProvinsi('#oriprovince'); 
    loadProvinsi('#desprovince'); 
    $('#oriprovince').change(function() { 
     alert('yussan'); 
    }); 
    $('#desprovince').change(function() { 
     alert('yussan'); 
    }); 
}); 

function loadProvinsi(id) { 
    $('#oricity').hide(); 
    $('#descity').hide(); 
    $(id).html('loading...'); 
    $.ajax({ 
     url: 'process.php?act=showprovince', 
     dataType: 'json', 
     success: function(response) { 
      $(id).html(''); 
      province = ''; 
      $.each(response['rajaongkir']['results'], function(i, n) { 
       province = '<option value="n[province_id]">'+n['province']+'</option>'; 
       <option></option> 
       province = province + ''; 
       $(id).append(province); 
      }); 
     }, 
     error: function() { 
      $(id).html('ERROR'); 
     } 
    }); 
} 
+0

」のスクリプト内には何がありますか? – Banzay

+0

私は地方の名前のリストをトリガするために私は、私はAPIのデータから得るためにasumming? –

+0

ブラウザのコンソールにはどのようなエラーがありますか? –

答えて

5
$.each(response['rajaongkir']['results'], function(i, n) { 
       var option = '<option value="'+n['province_id']+'">'+n['province']+'</option>'; 
       province += option; 
      }); 
       $(id).append(province); 

もう一度試してcode.Andこれを使用して各機能を交換してください。

+0

あなたは 'province = province + '';は何か有用だと信じていますか?なぜあなたは '$(id).append(province);をサイクルの外に置いたのですか? – Banzay

+0

変更後、 'province'には結果の2倍の最後の項目が含まれます。私は間違いを含んでいるのであなたの答えを下げます。 – Banzay

+0

@Banzayはこれが正しいですか? –

関連する問題