根据从另一个 <select> 中选择的选项过滤 <select> 选项

Question

我需要帮助：

我有两个下拉菜单（HTML 选择）：州和城市。

在状态选择元素中，有不同状态的选择。

在城市中，有一些选项以以下形式命名：州-城市（例如巴西-圣保罗）。在第二个下拉列表中，列出了所有国家/地区的所有城市。

现在我需要做以下事情：

当我从第一个下拉列表中选择一个州时，我需要制作一种过滤器，所以当我从第一个下拉列表中选择一个巴西时，第二个下拉列表需要自动过滤到仅以巴西开头的城市-...

http://marbestates.com/

页面顶部的搜索表单-请查看城市和位置

我想这可以用 jQuery 来完成，但我需要一些提示，jsfiddle 等。

提前谢谢你

Answer 1

$("#select1").change(function() {
if ($(this).data('options') === undefined) {
  /*Taking an array of all options-2 and kind of embedding it on the select1*/
 $(this).data('options', $('#select2 option').clone());
 }
 var id = $(this).val();
 var options = $(this).data('options').filter('[value=' + id + ']');
 $('#select2').html(options);
 });

Answer 2

试试这个：您可以根据选择的状态过滤选项并显示所有选项。您需要从可见城市中设置默认选定城市。

示例 HTML：

<select id="state">
    <option>Brazil</option>
    <option>Ghana</option>
</select>

<select id="city">
    <option>Brazil-city1</option>
    <option>Brazil-city2</option>
    <option>Brazil-city3</option>
    <option>Ghana-city1</option>
    <option>Ghana-city2</option>
</select>

jQuery:

$(function(){
    //function to show city
    var showCity = function(selectedState){
     $('#city option').hide();
        $('#city').find('option').filter(function(){
            var city = $(this).text();
            return city.indexOf(selectedState)!=-1;
        }).show();
        //set default value
        var defaultCity = $('#city option:visible:first').text();
        $('#city').val(defaultCity);
    };

    //set default state
    var state = $('#state').val();
    showCity(state);

    //on change event call showCity function 
    $('#state').change(function(){
       showCity($(this).val());
    });
});

JSFiddle Demo