Meerdere "live" selectie velden
Wat zoek ik.
Voor een uitgebreide filtering op een grote data set heb ik bv 4 of 5 <select></select>
Deze worden altijd volledig gevult met alle beschikbare opties. Nu wil ik dat als iemand in bv selectie veld 3 een optie aanvinkt alle andere selectie velden alleen nog de opties weergeven die mogelijk zijn. Als dan de gebruiker in selectie veld 1 een selectie maakt moeten weer alle andere velden zich updaten met de resterende beschikbare opties (is dus een extra filtering)
Hopelijk leg ik goed uit wat ik bedoel. Zo niet geef het aan probeer ik het nog eens.
Wie kan mij (op weg) helpen?
Sander Z op 26/07/2013 11:28:52:
als iemand in bv selectie veld 3 een optie aanvinkt alle andere selectie velden alleen nog de opties weergeven die mogelijk zijn
Hoe weet ik in "select 4" welke opties moeten verdwijnen mogen blijven in select 3?
bv. coctails: als rum niet geselecteerd is, moet Mojito verdwijnen ...
---
Trouwens; kan elke <select> elke andere select aanpassen? Heeft select 1 zowel een effect op select 3 als select 3 op select 1?
Of zijn er bv. 4 filter selects, en 1 resultaat?
Gewijzigd op 26/07/2013 12:17:11 door Kris Peeters
Qua inhoud:
In selectie 1 staan bv landen
In selectie 2 plaatsen
In selectie 3 winkels
Bij een "verse" start:
Klik ik in selectie 1 op Nederland dan zou ik bij selectie 2 en 3 dus alleen nog de plaatsen en winkels moeten overhouden die in nederland zijn. Klik ik daarna in selectie3 op Hema, dan verdwijnen in selectie 1 alle landen waar geen Hema is en in selectie 2 alle plaatsen waar geen Hema is.
Het moet (bij verse start) nog wel mogelijk blijven om in selectie 1 bv nederland en belgie en duitsland aan te vinken. En als dit gebeurt is (eigenlijk dus per aanzetten van vink) zouden alle andere selectie velden zich moetn updaten.
Hopelijk zo al weer iets duidelijker
Dus van grof naar verfijnd. Het selecteren van een select heeft dus enkel invloed op de volgende selects, niet de vorige.
Kijk, hier een soort preview van het effect.
Dit is ongeveer waar het naartoe moet.
Ik vertrek nu wel op festival en ben dus een paar dagen niet beschikbaar.
Je kan dit copy/pasten in een leeg bestand...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Live select</title>
</head>
<body>
<select class="live_select" id="alcohol" name="alcohol">
<option value="">---</option>
<option value="vodka">Vodka</option>
<option value="rum">Rum</option>
<option value="gin">Gin</option>
</select>
<select class="live_select" id="coctail" name="coctail">
<option value="">---</option>
<option value="mojito" data-alcohol="rum">Mojito</option>
<option value="screwdriver" data-alcohol="vodka">Screwdriver</option>
<option value="gin-fizz" data-alcohol="gin">Gin Fizz</option>
<option value="white-russian" data-alcohol="vodka">White Russian</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
// cashen van de elementen
var select_elements = $('.live_select');
var all_options = $('.live_select option');
// events
select_elements.change(function(e) {
var select = $(this); // = de select waar de gebruiker een optie heeft gekozen
var value = select.val(); // value van de option.
var select_name = select.attr('name');
// die combinatie van gegevens gebruiken we nu voor de filter. bv. we kozen alcohol -> rum. => dan zoeken we naar 'data-alcohol="rum"'
// we gaan alle options overlopen. bv. Indien data-alcohol aanwezig is, gaan we die option uitschakelen tenzij die data-alcohol "rum" is
all_options.css({'display': 'block'}); // voorlopig. eerst alles terug zetten
all_options.each(function(index) {
var data = all_options.eq(index).data(select_name);
if (data) {
if (data == value) {
all_options.eq(index).css({'display': 'block'});
}
else {
all_options.eq(index).css({'display': 'none'});
}
}
});
});
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Live select</title>
</head>
<body>
<select class="live_select" id="alcohol" name="alcohol">
<option value="">---</option>
<option value="vodka">Vodka</option>
<option value="rum">Rum</option>
<option value="gin">Gin</option>
</select>
<select class="live_select" id="coctail" name="coctail">
<option value="">---</option>
<option value="mojito" data-alcohol="rum">Mojito</option>
<option value="screwdriver" data-alcohol="vodka">Screwdriver</option>
<option value="gin-fizz" data-alcohol="gin">Gin Fizz</option>
<option value="white-russian" data-alcohol="vodka">White Russian</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
// cashen van de elementen
var select_elements = $('.live_select');
var all_options = $('.live_select option');
// events
select_elements.change(function(e) {
var select = $(this); // = de select waar de gebruiker een optie heeft gekozen
var value = select.val(); // value van de option.
var select_name = select.attr('name');
// die combinatie van gegevens gebruiken we nu voor de filter. bv. we kozen alcohol -> rum. => dan zoeken we naar 'data-alcohol="rum"'
// we gaan alle options overlopen. bv. Indien data-alcohol aanwezig is, gaan we die option uitschakelen tenzij die data-alcohol "rum" is
all_options.css({'display': 'block'}); // voorlopig. eerst alles terug zetten
all_options.each(function(index) {
var data = all_options.eq(index).data(select_name);
if (data) {
if (data == value) {
all_options.eq(index).css({'display': 'block'});
}
else {
all_options.eq(index).css({'display': 'none'});
}
}
});
});
})
</script>
</body>
</html>
Gewijzigd op 26/07/2013 12:49:41 door Kris Peeters
Toevoeging op 26/07/2013 13:18:26:
Mijn fout...
Ten eerste moet het van links naar rechts, maar ook van rechts naar links en alle andere mogelijke manieren werken.
En het gaat om checkboxes. Ik gaf het zelf compleet verkeerd aan. Dus een rij checkboxes voor de landen, een rij voor de plaatsen en een rij voor de winkels.
Dus check ik een plaats aan, dan zal de rij met landen en de rij met winkels zich moeten aanpassen.
Sorry voor mijn onduidelijkheid.
Gewijzigd op 26/07/2013 13:22:03 door Sander Z