Wie kann ich mit handlebars den Inhalt eines Массивы с выпадающими списками? Ich finde dazu keine passenden Inhalte. Ich möchte die Marke Auswählen und nur diese Marke eingeblendet bekommen. Wenn ich Alle auswähle sollen alle sichtbar sein.
Danke für die Hilfe. Hier gibt es immer был zu lernen. 310/2048 Как я могу использовать руль для выбора содержимого массива с помощью выпадающего списка? Я не могу найти контент для соответствия. Я хочу выбрать марку и показать только эту марку. Когда я выбираю Все, все должно быть видно.
Спасибо за помощь. Здесь всегда есть чему поучиться.
var tireList ={
"tires": [
{
"id": 1,"shortCode": "Bild","brand": "Continental","model": "WinterContact™ TS 860","price": "45.55€","stock": "4","available": "ja","season": "Sommer"
},
{
"id": 2,"shortCode": "Barum","brand": "Barum","model": "Bravuris 5HM","price": "33.55€","stock": "2","available": "ja","season": null
},
{
"id": 3,"shortCode": "Michelin","brand": "Michelin","model": "Alpin 6","price": "79.85€","stock": "0","available": "Nein","season": "Winter"
},
{
"id": 4,"shortCode": "good year","brand": "Good Year","model": "ULTRAGRIP PERFORMANCE +","price": "12.14€","stock": "20","available": "ja","season": "Ganzjahresreifen"
},
]
}
$(document).ready(function(){
var tireTemplate = $("#tire-template").html();
var compiledTireTemplate = Handlebars.compile(tireTemplate);
$(".tire-list-container").html(compiledTireTemplate(tireList));
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>04 Each Helper | Handlebars training</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Marke</p>
<select id="list" onchange="getSelectValue();">
<option value="0">Alle</option>
<option value="1">Continental</option>
<option value="2">Barum</option>
<option value="3">Michelin</option>
<option value="4">Good Year</option>
</select>
<script>
function getSelectValue(){
var selectedValue = document.getElementById("list").value;
console.log(selectedValue);
}
getSelectValue();
</script>
<h1>Reifen</h1>
<ul class="tire-list-container">
<script id="tire-template" type="text/x-handlebars-template">
{{#each tires}}
<li class="tireList">
<option {{bindAttr value="id" selected="selected"}}>{{id}}</option>
<img src="image/{{shortCode}}.jpg">
<p></p>
<h2>{{id}}</2>
<h2>{{brand}}</h2>
<p>Modell: {{model}}</p>
<P>Preis: {{price}}</p>
<p>Bestand: {{stock}}</p>
<p>Verfügbar: {{available}}</P>
<p>Season: {{#if season}}{{season}}{{else}}unknown{{/if}}</p>
</li>
</ul>
{{/each}}
</script>
<script src="handlebars-v4.4.3.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>