Javascript vraagje
ik ben op dit moment bezig met een zoekpagina voor mijn cms systeem en heb een idee in mijn hoofd dat ik bijna heb uitgewerkt.
De code die ik gebruik om een lijstje met opties weer te geven is als volgt:(ingekort natuurlijk)
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
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
<html>
<script language="Javascript" type="text/javascript">
function SelectItems(value)
{
var SearchListID=document.getElementById("SearchList");
len = SearchListID.length;
var i=0;
for( i=0; i<len; i++)
{
SearchListID.options[i].selected=value;
}
}
</script>
<div class="c1">
<select size="9" name="sf[]" id="SearchList" multiple="multiple">
<optgroup label="Module">
<option value="1">
Nieuws
</option>
<option value="2">
Nieuws Archief
</option>
<option value="3">
Forum
</option>
<option value="4">
Forum Archief
</option>
<option value="5">
Artikelen
</option>
<option value="6">
Downloads
</option>
<option value="7">
Leden
</option>
</optgroup>
</select>
<br>
<a href="javascript:SelectItems(1);">Selecteer alles</a> - <a href="javascript:SelectItems(0);">Deselecteer alles</a>
</div>
</html>
<script language="Javascript" type="text/javascript">
function SelectItems(value)
{
var SearchListID=document.getElementById("SearchList");
len = SearchListID.length;
var i=0;
for( i=0; i<len; i++)
{
SearchListID.options[i].selected=value;
}
}
</script>
<div class="c1">
<select size="9" name="sf[]" id="SearchList" multiple="multiple">
<optgroup label="Module">
<option value="1">
Nieuws
</option>
<option value="2">
Nieuws Archief
</option>
<option value="3">
Forum
</option>
<option value="4">
Forum Archief
</option>
<option value="5">
Artikelen
</option>
<option value="6">
Downloads
</option>
<option value="7">
Leden
</option>
</optgroup>
</select>
<br>
<a href="javascript:SelectItems(1);">Selecteer alles</a> - <a href="javascript:SelectItems(0);">Deselecteer alles</a>
</div>
</html>
Dit werkt perfect natuurlijk, maar ik wil er graag iets aan toe voegen.
Zo zou ik doormiddel van javascript willen dat als ik op forum druk: er een div onthuld word met meer opties. Omdat ik hier niet kom zonder eerst zelf wat te geprobeerd te hebben is dit wat ik er uit kreeg:
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<script language="Javascript" type="text/javascript">
function SelectItems(value)
{
var SearchListID=document.getElementById("SearchList");
len = SearchListID.length;
var i=0;
for( i=0; i<len; i++)
{
SearchListID.options[i].selected=value;
}
}
</script>
<script language="Javascript" type="text/javascript">
function SelectItems1(value)
{
var SearchListID=document.getElementById("SearchList1");
len = SearchListID.length;
var i=0;
for( i=0; i<len; i++)
{
SearchListID.options[i].selected=value;
}
}
</script>
<script>
function showHide( what )
{
var theDiv = document.getElementById( what );
theDiv.style.display = ( theDiv.style.display == "none" ) ? "block" : "none";
}
</script>
<div class="c1">
<select size="9" name="sf[]" id="SearchList" multiple="multiple">
<optgroup label="Module">
<option value="1">
Nieuws
</option>
<option value="2">
Nieuws Archief
</option>
<option value="3" onselect='showHide("forum"); return false'>
Forum
</option>
<option value="4">
Forum Archief
</option>
<option value="5">
Artikelen
</option>
<option value="6">
Downloads
</option>
<option value="7">
Leden
</option>
</optgroup>
</select>
<br>
<a href="javascript:SelectItems(1);">Selecteer alles</a> - <a href="javascript:SelectItems(0);">Deselecteer alles</a>
</div>
<div id="forum" style="float:left; width:200px; PADDING-LEFT: 25px; display: none;">
<select size="9" name="sf1[]" id="SearchList1" multiple="multiple">
<optgroup label="Categorie">
<option value="1">Mededeling</option>
<option value="2">Chatbox</option>
<option value="3">Client-side</option>
<option value="4">Server-side</option>
<option value="5">Grafisch</option>
<option value="6">Check Forum</option>
<option value="7">Battles</option>
<option value="8">Offtopic</option>
</optgroup>
</select>
<br />
<a href="javascript:SelectItems1(1);">Selecteer alles</a> -
<a href="javascript:SelectItems1(0);">Deselecteer alles</a>
<br />
<br />
</div>
</html>
<script language="Javascript" type="text/javascript">
function SelectItems(value)
{
var SearchListID=document.getElementById("SearchList");
len = SearchListID.length;
var i=0;
for( i=0; i<len; i++)
{
SearchListID.options[i].selected=value;
}
}
</script>
<script language="Javascript" type="text/javascript">
function SelectItems1(value)
{
var SearchListID=document.getElementById("SearchList1");
len = SearchListID.length;
var i=0;
for( i=0; i<len; i++)
{
SearchListID.options[i].selected=value;
}
}
</script>
<script>
function showHide( what )
{
var theDiv = document.getElementById( what );
theDiv.style.display = ( theDiv.style.display == "none" ) ? "block" : "none";
}
</script>
<div class="c1">
<select size="9" name="sf[]" id="SearchList" multiple="multiple">
<optgroup label="Module">
<option value="1">
Nieuws
</option>
<option value="2">
Nieuws Archief
</option>
<option value="3" onselect='showHide("forum"); return false'>
Forum
</option>
<option value="4">
Forum Archief
</option>
<option value="5">
Artikelen
</option>
<option value="6">
Downloads
</option>
<option value="7">
Leden
</option>
</optgroup>
</select>
<br>
<a href="javascript:SelectItems(1);">Selecteer alles</a> - <a href="javascript:SelectItems(0);">Deselecteer alles</a>
</div>
<div id="forum" style="float:left; width:200px; PADDING-LEFT: 25px; display: none;">
<select size="9" name="sf1[]" id="SearchList1" multiple="multiple">
<optgroup label="Categorie">
<option value="1">Mededeling</option>
<option value="2">Chatbox</option>
<option value="3">Client-side</option>
<option value="4">Server-side</option>
<option value="5">Grafisch</option>
<option value="6">Check Forum</option>
<option value="7">Battles</option>
<option value="8">Offtopic</option>
</optgroup>
</select>
<br />
<a href="javascript:SelectItems1(1);">Selecteer alles</a> -
<a href="javascript:SelectItems1(0);">Deselecteer alles</a>
<br />
<br />
</div>
</html>
Maar dit werkt niet.. Wat voor javaevent ik ook probeer het lukt met niet om iets te laten gebeuren als ik 1 van de items in de eerste list selecteer...
Wie o wie geeft me raad of helpt me op weg.
Edit:
Zoals hier:
voorbeeld: extra inputs laten zien als een select op een bepaalde option staat
voorbeeld: extra inputs laten zien als een select op een bepaalde option staat
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<script type="text/javascript">
function formfocus() {
document.getElementById('trefwoord').focus();
}
window.onload = formfocus;
</script>
function formfocus() {
document.getElementById('trefwoord').focus();
}
window.onload = formfocus;
</script>
Hij jouw javascript stukje niet wilt uitvoeren. Als ik dit stukje weg haal werkt hij perfect, alleen werkt de autofocus niet meer?
Edit:
Ziezo. Zoals je in de bron kunt zien maak ik een init functie die ik aan window.onload toeken. In die init functie kun je dan alles doen dat je nodig hebt.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn