Tijden veranderen
jQuery Select box namaken
Eer gisteren kwam ik op het idee om een select box met jQuery te maken. Het is al aardig gelukt.
Je kan al een optie selecteren, en deze kan worden mee verzonden met een formulier. Maar ik wil niet het land mee verzenden maar het ID zeg maar.
Ik weet alleen niet waar ik deze moet plaatsen, en hoe ik deze dan vervolgens moet pakken.
Een voorbeeld en de code staat hieronder.
jQuery Select box
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
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
<html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selectBox').click(function(){
$('#selectItems').slideToggle();
$('#selectBox').html('Selecteer je land');
});
$('#selectItems li').click(function(){
$('#selectItems').slideToggle();
$('#selectBox').html($(this).html());
$('#country').val($(this).html())
});
});
</script>
<style type="text/css">
#selectBox
{
border: 1px solid black;
width: 130px;
cursor: pointer;
}
#selectItems
{
list-style-type: none;
border: 1px solid black;
width: 130px;
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
display: none;
background: #fff;
cursor: pointer;
margin: -1px 0 0 5px;
}
#selectItems a
{
display: block;
}
</style>
</head>
<body>
Belgie
<form method="post">
<div id="selectBox">Selecteer je land</div>
<ul id="selectItems">
<li>Belgie</li>
<li>Nederland</li>
</ul>
Hier weer verder geack<br />
<input type="hidden" id="country" name="country" />
<input type="submit" />
</form>
</body>
</html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selectBox').click(function(){
$('#selectItems').slideToggle();
$('#selectBox').html('Selecteer je land');
});
$('#selectItems li').click(function(){
$('#selectItems').slideToggle();
$('#selectBox').html($(this).html());
$('#country').val($(this).html())
});
});
</script>
<style type="text/css">
#selectBox
{
border: 1px solid black;
width: 130px;
cursor: pointer;
}
#selectItems
{
list-style-type: none;
border: 1px solid black;
width: 130px;
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
display: none;
background: #fff;
cursor: pointer;
margin: -1px 0 0 5px;
}
#selectItems a
{
display: block;
}
</style>
</head>
<body>
Belgie
<form method="post">
<div id="selectBox">Selecteer je land</div>
<ul id="selectItems">
<li>Belgie</li>
<li>Nederland</li>
</ul>
Hier weer verder geack<br />
<input type="hidden" id="country" name="country" />
<input type="submit" />
</form>
</body>
</html>
Alvast bedankt,
Dennis Mertens
Gewijzigd op 01/01/1970 01:00:00 door Dennis Mertens
ik denk wss.... als je op een land klikt dat je de value een id moet maken voor de submit? donno, dan word er iig een id gesubmit en geen naam
Hey, mare dit heb ik zelf gemaakt, dus toestemming vragen hae ;)
Quote:
Stiekem een bump
Niet op kunnen lossen met een span. Iemand enig idee? :)
Ik heb een misschien wel de oplossing voor jou idee!
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
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
<html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selectBox').click(function(){
$('#selectItems').slideToggle();
$('#selectBox').html('Selecteer je land');
});
$('#selectItems li').click(function(){
$('#selectItems').slideToggle();
$('#selectBox').html($(this).html());
$('#country').attr('value', $(this).attr('rel'));
});
$('#test').click(function() {
$("#selected").html("U heeft de volgende item gekozen: " + $("#country").attr('value'));
// Don't let the browser send any form to an other script.
return false;
});
});
</script>
<style type="text/css">
#selectBox
{
border: 1px solid black;
width: 130px;
cursor: pointer;
}
#selectItems
{
list-style-type: none;
border: 1px solid black;
width: 130px;
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
display: none;
background: #fff;
cursor: pointer;
margin: -1px 0 0 5px;
}
#selectItems a
{
display: block;
}
</style>
</head>
<body>
<div id="selected"><!-- void --></div>
<form method="post">
<div id="selectBox">Selecteer je land</div>
<ul id="selectItems">
<li rel="BG">Belgie</li>
<li rel="NL">Nederland</li>
</ul>
Hier weer verder geack<br />
<input type="hidden" id="country" name="country" />
<input type="submit" id="test" />
</form>
</body>
</html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selectBox').click(function(){
$('#selectItems').slideToggle();
$('#selectBox').html('Selecteer je land');
});
$('#selectItems li').click(function(){
$('#selectItems').slideToggle();
$('#selectBox').html($(this).html());
$('#country').attr('value', $(this).attr('rel'));
});
$('#test').click(function() {
$("#selected").html("U heeft de volgende item gekozen: " + $("#country").attr('value'));
// Don't let the browser send any form to an other script.
return false;
});
});
</script>
<style type="text/css">
#selectBox
{
border: 1px solid black;
width: 130px;
cursor: pointer;
}
#selectItems
{
list-style-type: none;
border: 1px solid black;
width: 130px;
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
display: none;
background: #fff;
cursor: pointer;
margin: -1px 0 0 5px;
}
#selectItems a
{
display: block;
}
</style>
</head>
<body>
<div id="selected"><!-- void --></div>
<form method="post">
<div id="selectBox">Selecteer je land</div>
<ul id="selectItems">
<li rel="BG">Belgie</li>
<li rel="NL">Nederland</li>
</ul>
Hier weer verder geack<br />
<input type="hidden" id="country" name="country" />
<input type="submit" id="test" />
</form>
</body>
</html>
Hoop dat het wat helpt.
Nu verder met het multiple maken ;)
Dank u 8)
Ik denk enkel dat het niet (x)html valid is. Heb het namelijk niet gecheckt.
En ik las ergens dat li de attribuut value heeft gehad, en dat het (nog) niet 'verboden' is, deze attributen te gebruiken.
Ik ga er eens over nadenken
Deze zou je dan nog iets moeten verbouwen
http://www.sportmatch.nl/productie/cases/