javascript - 如何制作2个从属选项字段？

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').change({
    /*some code here*/
});

然后，将您的 $('#capital_city').autocomplete({}) 转移到里面，如下所示:

$('#country_name').change({
    var country = $(this).val();

    $('#capital_city').autocomplete({
            source: 'list_city_' + country, /*see explanation below*/
            minLength: 0,
            scroll: true,
            autoFocus: true
        }).focus(function() {
            $(this).autocomplete("search", "")
                    .autocomplete( "widget" )
                    .addClass( "country_field" );
        });

});

每次更改国家/地区名称时，自动补全的城市来源也会相应更改。

要实现这一点，请在通过模型获取城市列表时按国家/地区对其进行分组。

我无法测试此代码，它可能需要一些调整才能为您工作，但我希望它能为您提供一些解决问题的想法。祝你好运!