Question

我需要帮助：

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

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

在城市中，有一些选项以形式命名：State-City（例如Brazil-Sao Paolo）。在第二次下降中，列出了所有国家的所有城市。

现在我需要做以下事情：

当我从第一次下拉状态中获取状态时，我需要制作一种过滤器，所以当我从第一次下拉选择巴西时，第二次下拉需要自动过滤到仅从巴西开始的城市-...

http://marbestates.com/

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

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

提前谢谢

Answer 1

尝试此操作：您可以根据所选状态筛选选项并显示所有选项。您需要从可见城市设置默认选定城市。

示例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

Answer 2

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

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

2 个答案: