過濾<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>

回答

相關問題