javascript-在PHP中调用下拉列表后,ajax将不会响应

我试图通过html页面上的ajax使用PHP从API捕获数据,当我尝试进行直接链接时,它可以成功工作,但是当我尝试在下拉菜单中使用ajax调用它时,就像无法调用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');
        }
    });
}

解决方法:

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

请使用此代码替换每个函数.然后重试.

javascript-在PHP中调用下拉列表后,ajax将不会响应

相关推荐