带有AJAX和DOM处理API的下拉菜单 - javascript

我从API获取数据，但未在我的下拉菜单中显示。

如果我用?act=showprovince回显，结果就在那里。

example.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.min.js">
        </script>
        <script type="text/javascript" src="js/script.js"></script>
        <title>Penggunaan API RajaOngkir | IDMore</title>
        <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>Provinsi</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>
      </link>
    </link>
  </head>

process.php

require_once('idmore.php');

$IdmoreRO = new IdmoreRO();
if(isset($_GET['act'])):

        switch ($_GET['act']) {

        case 'showprovince':
        $province = $IdmoreRO->showProvince();
        echo $province;

        break;
        default:
        # code...
        break;
        }
endif;

idmore.php

class IdmoreRO{
    public function __construct()
            {

            }
    //menampilkan data provinsi
    public function showProvince()
        {
            $curl = curl_init();
            curl_setopt_array($curl, array(
            CURLOPT_URL => "http://rajaongkir.com/api/starter/province",
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_ENCODING => "",
            CURLOPT_MAXREDIRS => 10,
            CURLOPT_TIMEOUT => 30,
            CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
            CURLOPT_CUSTOMREQUEST => "GET",
            CURLOPT_HTTPHEADER => array(
            "key: 3f01f13ce2b42ba983ad3f3bc4852f84"
            ),
            ));
            $response = curl_exec($curl);
            $err = curl_error($curl);
            curl_close($curl);
            if ($err) {
                $result = 'error';
                return 'error';
            } else {
                return $response;
            }
        }
}

script.js

$(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>';
                        province = province + '';
                        $(id).append(province);
                    });
            },
            error:function(){
                $(id).html('ERROR');
            }
        });
    }

参考方案

我已经检查了您的代码，所有您遇到的问题是JavaScript函数loadProvinsi()的这一行：

province = '<option value="'n['province_id']'">'+n['province']+'</option>';

您错过了两个“ +”号！

因此正确的代码将如下所示：

province = '<option value="'+n['province_id']+'">'+n['province']+'</option>';

代码的其余部分看起来还可以，并且通过这两个小的更改，下拉列表显示了省份

如果您可能需要完整的javascript函数，loadProvinsi()将如下所示：

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>';
                    province = province + '';
                    $(id).append(province);
                });
        },
        error:function(){
                $(id).html('ERROR');
        }
    });
}

使用php重新加载内容 - javascript

在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables（jquery插件）中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段，并使其不可编辑或隐藏，但在提交模态表单时将其发布到服务器。表格和模式表…

保留文本区域的数据或值，然后选择输入 - javascript

通过$ _POST提交表单时，输入文件值仍然保留。像这样： if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…

尽管刷新，jQuery格式仍未应用于Ajax数据 - javascript

我正在通过GET响应消息从服务器（php文件）的可折叠内部加载列表视图。但是，尽管刷新了jQuery元素，但jQuery格式并未应用于添加的HTML。我的页面在这里：http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码（仅相关代码）<script> lastRecor…

JavaScript处理期间数组内部的数组 - javascript

我正在尝试使用Ajax处理表单，并且在处理复选框时遇到了问题。我以为我可以在数组中做一个数组，将选中的框添加到数据对象中，但这似乎不起作用。它不会显示为控制台中对象的一部分或类似内容。我尝试了一些变化，但没有任何效果。这是当前的样子：var formData = { 'fname' : $('input[name=fname]&…

推荐标签：, , ,

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在看。自己强行看了两个月，全部给看完了。感觉这文笔也就我读初中的水平……而且写着国内的一些情况，外国人能理解吗？这书为什么会这么火？这水平我也可以去写呀[笑哭][笑哭][笑哭] 招商银行员工：可以写赶紧写一个啊，能拿科幻文学雨果奖。 包清白：哦 楼主：pei ！tui ！你也配姓龙 楼主：@赵龙王 呵呵 […]