过滤<select>选项取决于从另一个<select>

选择的选项，我需要帮助的东西：过滤<select>选项取决于从另一个<select>

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

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

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

现在我需要做以下几点：

当我拿起从第一液滴的状态下，我需要一种过滤器，所以当我从第一个下拉选择一个巴西下来，第二个下拉需要自动过滤与巴西开始只有城市-...

http://marbestates.com/

的搜索形式在页面请看城市和地点

的顶部，我想是可以做与jQuer Y，但我需要一些提示，等的jsfiddle

预先感谢您

来源

2015-07-02 Stefan L

请分享一些相关的代码，以便我们能够帮助您更好地 –

的http：// marbestates .com/ 搜索ing形式在页面顶部..请看看城市和位置..谢谢 –

你可以做一个网页搜索;已经有很多插件或解决方案。或者，如果你不成功，你可以在这里发布相关的HTML和JavaScript/jQuery。 – PeterKA

试试这个：你可以的状态选择的基础上，筛选选项，并显示他们。您需要从可见城市中设置默认的选定城市。

样本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

来源

2015-07-02 13:48:38

伟大的解决方案！非常感谢你！但是现在我的默认值只是小问题。请参阅www.marbestates.com。当我从下拉菜单中选择Marbella没有默认值显示时，需要点击看看。我只需要默认值设置，当点击马贝拉时，就会显示第一个马贝拉城市。 –

我无法打开www.marbestates.com，因为拒绝了我的访问。您可以检查jsfiddle演示链接，我将首次设置默认值以及每当您更改状态时。请检查是否有其他影响您的选择框的jQuery或JS。 –

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

来源

2017-07-07 06:12:17

过滤<select>选项取决于从另一个<select>

回答

相关问题