jQuery Select box namaken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dennis Mertens

Dennis Mertens

08/04/2009 14:43:00
Quote Anchor link
Hallo PHPHulpers,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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
 
PHP hulp

PHP hulp

04/08/2021 18:21:42
 
Wesley Overdijk

wesley Overdijk

08/04/2009 14:52:00
Quote Anchor link
Ik heb geen idee. al wil ik wel zeggen dat ik dit best stoer vind. :P

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
 
Dennis Mertens

Dennis Mertens

08/04/2009 14:53:00
Quote Anchor link
Ik bedenk net dat in in die li even ene span ga zetten ofzo :)

Hey, mare dit heb ik zelf gemaakt, dus toestemming vragen hae ;)
 
Dennis Mertens

Dennis Mertens

09/04/2009 09:38:00
Quote Anchor link
Quote:
Stiekem een bump


Niet op kunnen lossen met een span. Iemand enig idee? :)
 
Dutch Caffeine

Dutch Caffeine

09/04/2009 09:51:00
Quote Anchor link
Heey Dennis,

Ik heb een misschien wel de oplossing voor jou idee!

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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.
 
Dennis Mertens

Dennis Mertens

09/04/2009 10:13:00
Quote Anchor link
Ik was net op jQuery aan het kijken bij die attribuut opties. Thanks, dit zocht ik ;)

Nu verder met het multiple maken ;)

Dank u 8)
 
Dutch Caffeine

Dutch Caffeine

09/04/2009 10:36:00
Quote Anchor link
Geen dank dennis.

Ik denk enkel dat het niet (x)html valid is. Heb het namelijk niet gecheckt.
 
Dennis Mertens

Dennis Mertens

09/04/2009 10:38:00
Quote Anchor link
Agja, shit happens dan. Het gaat bij mij om dit stukje om de functionaliteit. Als dit eenmaal goed werkt, kan ik altijd nog kijken naar een andere oplossing...

En ik las ergens dat li de attribuut value heeft gehad, en dat het (nog) niet 'verboden' is, deze attributen te gebruiken.
 
Dutch Caffeine

Dutch Caffeine

09/04/2009 10:44:00
Quote Anchor link
Ik heb net de html gevalideerd, en ik krijg daar een error dat de rel attribuut niet in een li tag bestaat.
 
Dennis Mertens

Dennis Mertens

09/04/2009 11:15:00
Quote Anchor link
Ik heb van rel value gemaakt. Dat is wel goed. Tot zover ik het zie.
 
Dutch Caffeine

Dutch Caffeine

09/04/2009 15:58:00
Quote Anchor link
Het zou wel leuk zijn om hiervan een jQuery plugin te maken!

Ik ga er eens over nadenken
 
Dennis Mertens

Dennis Mertens

09/04/2009 16:04:00
Quote Anchor link
Nou, ik heb al een jQuery plugin gezien hier voor. Alleen die vond ik niet geweldig :)
 
Onbekend Onbekend

Onbekend Onbekend

09/04/2009 18:06:00
 
Niek Weevers

Niek Weevers

09/04/2009 19:00:00
Quote Anchor link
Op het werk hebben we ook al zo'n functie gemaakt.
Deze zou je dan nog iets moeten verbouwen
http://www.sportmatch.nl/productie/cases/
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.