javascript - 如何根据API数据从2个相关选项向数据库输入值

Question

我尝试从 2 个相关选项将选项值输入到数据库，问题是选项上的值是 id，而不是字符串。我仅在 1 个选项值上成功输入值，但我需要在数据库中输入该选项值中的 2 个。

这是我的 js 代码:

$(document).ready(function(){
    loadProvinsi('#oriprovince');
    loadProvinsi('#desprovince');
    $('#oriprovince').change(function(){
        $('#oricity').show();
        var idprovince = $('#oriprovince').val();
        loadCity(idprovince,'#oricity')
    });
});

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');
        }
    });
}
function loadCity(province,id){
    $.ajax({
        url:'process.php?act=showcity',
        dataType:'json',
        data:{province:province},
        success:function(response){
            $(id).html('');
            city = '';
                $.each(response['rajaongkir']['results'], function(i,n){
                    city = '<option value="'+n['city_id']+'">'+n['city_name']+'</option>';
                    city = city + '';
                    $(id).append(city);
                });
        },
        error:function(){
            $(id).html('ERROR');
        }
    });
}

如果我更改为这行代码:

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

它成功地变成字符串，但另一个选项无法显示城市列表，因为它基于省份 ID，是否有任何建议，例如选项上的 2 值？

注册表单registuser.php片段

                          <tr>
                            <td><label for="prov_usr">Provinsi</label></td>
                            <td>
                            <select name="prov_usr" id="oriprovince">
                            <option>Provinsi</option>
                            </select>
                            </td>
                          </tr>
                          <tr>
                            <td><label for="kota_usr">Kota</label></td>
                            <td>
                            <select name="kota_usr" id="oricity">
                            <option>Kota</option>
                            </select>
                            </td>
                          </tr>

process.php 片段

header("Content-Type: application/json");
require_once('idmore.php');
$IdmoreRO = new IdmoreRO();
if(isset($_GET['act'])):
    switch ($_GET['act']) {

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

        case 'showcity':
            $idprovince = $_GET['province'];
            $city = $IdmoreRO->showCity($idprovince);
            echo $city;
        break;

idmore.php(php 类)

class IdmoreRO{
    private $key;
    public function __construct()
    {
        //masukan api key disini
        $this->key = '3f01f13ce2b42ba983ad3f3bc4852f84';    
    }
    //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: $this->key"
                ),
            ));
        $response = curl_exec($curl);
        $err = curl_error($curl);
        curl_close($curl);
        if ($err) {
            $result = 'error';
            return 'error';
        } else {
            return $response;
        }
    }
    //menampilkan data kabupaten/kota berdasarkan id provinsi
    public function showCity($province)
    {
        $curl = curl_init();
        curl_setopt_array($curl, array(
            CURLOPT_URL => "http://rajaongkir.com/api/starter/city?province=$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: $this->key"
                ),
            ));
        $response = curl_exec($curl);
        $err = curl_error($curl);
        curl_close($curl);
        if ($err) {
            $result = 'error';
            return 'error';
        } else {
            return $response;
        }
    }

Answer 1

您需要使用两个值:提交时发送到服务器的字符串，以及在 ajax 请求中查询城市的 ID。您将需要在 value 属性中使用字符串，因为这是表单将提交给服务器的内容，并添加带有 id 的附加属性，以便您可以在 ajax 请求中使用它。

因此，要建立省份选择，您可以这样做:

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

在哪里获取省份ID来查询城市，访问它就像

var idprovince = $("#oriprovince option:selected").data("province_id");

您的代码应如下所示:

$(document).ready(function(){
    loadProvinsi('#oriprovince');
    loadProvinsi('#desprovince');
    $('#oriprovince').change(function(){
        $('#oricity').show();
        var idprovince = $("#oriprovince option:selected").data("province_id")
        loadCity(idprovince,'#oricity')
    });
});

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']+'" data-province_id="'+n['province_id']+'">'+n['province']+'</option>'
                    province = province + '';
                    $(id).append(province);
                });
        },
        error:function(){
            $(id).html('ERROR');
        }
    });
}
function loadCity(province,id){
    $.ajax({
        url:'process.php?act=showcity',
        dataType:'json',
        data:{province:province},
        success:function(response){
            $(id).html('');
            city = '';
                $.each(response['rajaongkir']['results'], function(i,n){
                    city = '<option value="'+n['city_id']+'">'+n['city_name']+'</option>';
                    city = city + '';
                    $(id).append(city);
                });
        },
        error:function(){
            $(id).html('ERROR');
        }
    });
}

您可以使用jQuery.data()或jQuery.attr()