php - 如何创建两个依赖的下拉(自动完成)菜单？

Question

我希望我的 Capital_city 自动完成字段仅显示与 Country_name 相关的选项。因此，当在第二个选项字段中选择一个国家/地区时，仅显示与所选国家/地区相关的城市。谢谢。

这是我的 view.php:

<div class="filtering">
 <form class="searchbox_1">
Country Name: <input type="text" class="search_1" name="country_name" id="country_name" />
City Name: <input type="text" class="search_1" name="capital_city" id="capital_city" />
Date from <input class="search_1" type="date" name="from_date" id="from_date"/>
Date to <input class="search_1" type="date" value = "<?php echo date('Y-m-d')?>"  name="to_date" id="to_date"/>
<center><button  class="submit_1" type="submit" id="LoadRecordsButton">Search</button>
    <input class ="submit_1" type="reset" value="Clear fields!"></center>

 </form>
 </div>
 <div id="countryTable"></div>
 <script type="text/javascript">

 $(document).ready(function () {

//Prepare jTable
$('#countryTable').jtable({
title: 'Country\'s',
        paging: true,
        pageSize: 10,
        sorting: true,
        defaultSorting: 'country_name ASC',
        selecting: true,
        multiselect: true,
        selectingCheckboxes: true,
        selectOnRowClick: true,
        actions: {
                listAction:   'get_country',
                createAction: 'create_country',
                updateAction: 'update_country',
                deleteAction: 'delete_country'
        },
        fields: {
            country_id: {
            key: true,
                list: false
            },
                country_name: {
                title: 'Country Name',
                width: '11%'
                },
                country_code: {
                title: 'Country Code',
                width: '11%'
                },
                surface_area: {
                title: 'Surface Area (m<sup>2</sup>)',
                width: '13%'
                },
                continent_name: {
                title: 'Continent Name'
                },
                continent: {
                title: 'Continent Code',
                width: '12%'
                },
                population: {
                title: 'Population'
                },
                capital_city: {
                title: 'Capital City'
                },
                record_date: {
                title: 'Record Date',
                        type: 'date',
                        displayFormat: 'mm/dd/yy',
                        create: false,
                        edit: false,
                        sorting: false
                }
        },


        $('#country_name').autocomplete({
            source: 'list_country',
            minLength: 0,
            scroll: true,
            autoFocus: true
        }).focus(function() {
        $(this).autocomplete("search", "")
                .autocomplete( "widget" )
                .addClass( "country_field" );
    });

     $('#capital_city').autocomplete({
        source: 'list_city',
        minLength: 0,
        scroll: true,
        autoFocus: true
    }).focus(function() {
        $(this).autocomplete("search", "")
                .autocomplete( "widget" )
                .addClass( "country_field" );
    });

$('#LoadRecordsButton').click(function (e) {
    e.preventDefault();
    $('#countryTable').jtable('load', {
        country_name: $('#country_name').val(),
        capital_city: $('#capital_city').val(),
        from_date: $('#from_date').val(),
        to_date: $('#to_date').val()
    });

});

$('#LoadRecordsButton').click();

 });

 </script>
 </div>

这是我的 model.php:

 public function get_country_name() {

 $searchTerm = filter_input(INPUT_GET, 'term');

  $query = $this->db->query("SELECT DISTINCT country_name FROM country "
   . "WHERE deleted=0 AND country_name LIKE '" . $searchTerm . "%' ORDER BY    country_name ASC");

 $row = array();

foreach ($query->result_array() as $ro) {
$row[] = $ro['country_name'];
}
   echo json_encode($row);
}
 public function get_city_name() {

 $searchTerm = filter_input(INPUT_GET, 'term');

 $query = $this->db->query("SELECT DISTINCT capital_city FROM country "
 . "WHERE deleted=0 AND capital_city LIKE '" . $searchTerm . "%' ORDER BY     capital_city ASC");

$row = array();

foreach ($query->result_array() as $ro) {
$row[] = $ro['capital_city'];
}
echo json_encode($row);
}

这是我的controller.php:

public function list_country(){

$this->load->model('Country_model');
$this->Country_model->get_country_name();

}    

public function list_city(){

$this->load->model('Country_model');
$this->Country_model->get_city_name();

}

Answer 1

您需要在“country_name”自动完成中使用“onselect”选项。

在国家/地区列表中选择一个项目后，您会将国家/地区 ID 传递给另一个函数，该函数又会更新城市自动完成源以传递所选国家/地区 ID。 您可以在 API 中使用 GET，将国家/地区 ID 传递给您的模型并获取属于该国家/地区 ID 的城市。 根据您的 jquery 版本，语法可能会略有变化。

$('#country_name').autocomplete({
            source: 'list_country',
            minLength: 0,
            scroll: true,
            autoFocus: true
        }).focus(function() {
        $(this).autocomplete("search", "")
                .autocomplete( "widget" )
                .addClass( "country_field" );
    })select: function( event, ui ) {
        changecitysource(ui.item.country_id); // change the country id according to your source
    };

    function changecitysource(countryid){
        var newsourceurl = "http://newurl.org/getcities/countryid";
        $( "#capital_city" ).autocomplete('option', 'source', newsourceurl);
    }

Check this fiddle