Javascript 如何设置2个相关选项字段？

我希望我的capital\u city自动完成字段仅显示与国家/地区名称相关的选项。因此，当在第二个选项字段中选择国家时，仅显示与所选国家相关的城市。多谢各位

以下是my 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>

这是我的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();

}

---

我已经找了好几天的办法了。请帮帮我。：-

尝试添加如下内容：

$('#country_name').change({
    /*some code here*/
});

$('#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" );
        });

});

然后，将您的

$（'#capital_city'）.autocomplete（{}）

转移到内部，如下所示：

$('#country_name').change({
    /*some code here*/
});

$('#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" );
        });

});

每次更改国家名称时，自动完成的城市来源也会相应更改

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

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