基於選項選擇的Javascript顯示/隱藏

所以我有一個汽車列表，每輛車來自某個國家。每個項目都有一個特定國家的分類。基於選項選擇的Javascript顯示/隱藏

我怎樣才能使它顯示和隱藏基於選擇像

所有國家1 COUNTRY2

所以，如果我選擇COUNTRY1我只希望看到國家1，如果我選擇我所想看到所有的國家

我有它的1個國家的工作，但是當我按所有什麼都沒有發生..或當沒有國家的div時，也沒有任何反應！

<script> 

    function selectCountry() { 
     var country = document.getElementById("countryList"); 
     display(country); 
    } 

    function display(value) { 
     var country = value; 
     var list = document.getElementsByClassName(country); 

     for (var i = 0; i < list.length; i++) { 
      list[i].style.display = 'block'; 
     }    
    } 

</script> 

<form> 
    Select country: 
    <select id="countryList" onchange="selectCountry()"> 
     <option value="all">All</option> 
     <?php foreach ($countries as $country) { 
      echo "<option value=" . $country. ">" . $country . "</option>"; 
     } ?>   
    </select> 
</form>

來源

2014-01-31 bobbybouwmann

在你的'display（）'函數中，country是通過ID節點，而不是className（基本上應該是字符串）。 –

[document.getElementsByClassName]（https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName）缺少引號 – VenomVendor

您應該將all類添加到每個項目。基本上，當你選擇all，你這樣做：

function display(value) { 
    //VALUE == "all" 
    var country = value; 
    //GET EVERY ELEMENT WITH "all" CLASS 
    var list = document.getElementsByClassName(country); 

    //IN YOUR CASE "list.length == 0" SO NO HIGHLIGHT 
    for (var i = 0; i < list.length; i++) { 
     list[i].style.display = 'block'; 
    }    
}

你應該張貼的div代碼也更好地瞭解情況。

編輯：

此外，如果你想隱藏你的display功能應該像所有的元素是我寫的：

var allItems = document.getElementsByClassName("all"); 

for (var i = 0; i < allItems.length; i++) { 
    allItems[i].style.display = 'none'; 
} 

var list = document.getElementsByClassName(country); 

for (var i = 0; i < list.length; i++) { 
    list[i].style.display = 'block'; 
}

未經測試，但應該工作。

來源

2014-01-31 08:36:23 Jonathan

感謝您的想法，讓我試試看：D – bobbybouwmann

那個是男人的東西：D我現在很高興！ – bobbybouwmann

很高興工作;-) – Jonathan

基於選項選擇的Javascript顯示/隱藏

回答

相關問題