jQuery Select box namaken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Front-end Developer / JavaScript / HTML @ Utrecht

2021-10-20 iSense Front-end Developer JavaScript HTML #vacancy-front-end-developer { position: open; } ISKA51385 Organisatie Ben jij een Front-end Developer die dit nog net even wat beter kan? Dan is er bij een hechte organisatie die een grote speler op HR-gebied vormt nog ruimte voor jou ter aanvulling van het team! Dit team is te omschrijven als ambitieus en enthousiast en bestaat momenteel uit drie Developers. De organisatie staat aan de vooravond van een grote transitie naar een compleet nieuw te bouwen Microservices platform, dus wanneer je het leuk vindt om met een bedrijf mee te groeien en aan die groei bij

Bekijk vacature »

GE Smallworld Ontwikkelaar - Utilities

Wij zoeken een Geo-ICT Smallworld ontwikkelaar met interesse in de nieuwste ontwikkelingen in de Energiemarkt! Wat ga je doen? Wist je dat CGI het grootste bedrijf is met een eigen Geo-ICT community? Dat we ook in verschillende landen waaronder Nederland de koploper zijn op het gebied van Geo-ICT dienstverlening? We breiden onze Geo-ICT activiteiten nog steeds verder uit. Zo zijn wij ons vooral aan het richten op de nieuwste ontwikkelingen in de energiemarkt en de daarbij horende energietransitie. Het CO2 neutraal maken van de samenleving is onze doelstelling en jij kan daar een actieve bijdrage aan leveren! Onze Geo-ICT practise

Bekijk vacature »

ETL Ontwikkelaar / Data Engineer BI

ETL Ontwikkelaar / Data Eningeer BI - Public Transport Functiebeschrijving: Wil jij als ervaren ETL Ontwikkelaar zorgen dat onze klanten in de transportsector waarde kunnen halen uit data en de business kunnen voorzien van hoogwaardige informatieproducten, van dashboards tot complexe voorspelmodellen? Zoek jij een nieuwe uitdaging en een omgeving waar vrijheid, teamspirit en ondernemerschap onderdeel zijn van het DNA? Dan nodigen wij jou uit om verder te lezen! Wat ga je doen? Wij zoeken een ervaren en communicatief sterke ETL Ontwikkelaar / Data Engineer BI die in een autonoom agile team kan werken via de scrummethodiek en zich bezig gaat

Bekijk vacature »

Applicatieontwikkelaar Dow regio Terneuzen

Over de functie Wil jij werken bij een Top Employer 2020 die zich inzet voor zijn medewerkers en daarnaast veel lokale initiatieven steunt? En weet jij je weg te vinden tussen uiteenlopende IT-problemen? Dan is Dow het bedrijf voor jou! Bij deze fijne werkgever kan jij aan de slag als applicatieontwikkelaar. Hiertegenover staat een salaris tot € 3300,- per maand, een reiskostenvergoeding en ruime ontwikkelingsmogelijkheden. Klinkt dit als jouw droombaan? Lees dan snel verder! Uitzendbureau Manpower is voor Dow Benelux in regio Terneuzen op zoek naar een applicatieontwikkelaar. Deze fulltime functie maakt deel uit van het Dow Terneuzen Site Logistics

Bekijk vacature »

Front-end Developer / JavaScript @ Nijmegen

2021-07-20 iSense Front-end Developer JavaScript Wil jij als Front-end Developer de kar trekken, een nieuw JavaScript framework implementeren en meedenken met UI oplossingen? Lees dan snel verder en solliciteer! ISK50467 Nieuw Organisatie Je komt als Front-end Developer te werken bij een familiebedrijf, een kleine en zeer succesvolle organisatie. Ze zijn een online verkoopplatform en in Nederland één van de grootste op hun gebied. Ze zijn ook internationaal actief, in de rest van Europa. Totaal werken er ruim 20 collega's, waarvan 6 ontwikkelaars in het IT-team. Het online platform en de applicaties rondom het platform zijn recent geheel vernieuwd en hiervoor

Bekijk vacature »

Fullstack developer Angular / .NET Core / C#

Bedrijfsomschrijving De klantrelaties gaan hier verder dan alleen een applicatie opleveren. Vaak wordt er samen met een partner een product bedacht en ontwikkelt die dan gezamenlijk ook wordt vermarkt. Zo zijn er in de loop der jaren al een aantal succesvolle applicaties ontwikkelt voor in de zorg, e-commerce, verzekeraars en vele andere branches. Het bedrijf is professioneel en de kwaliteit staat hier voorop. Functieomschrijving Je gaat hier werken als fullstack .NET developer en wordt onderdeel van een van de vier Scrum teams. De teams zijn redelijk vast waardoor je echt weet wat je aan elkaar hebt en samen bepaal je

Bekijk vacature »

C# .Net Developer WPF .NET5 Backend

Bedrijfsomschrijving Deze mooie klant is een ICT partner binnen de groensector, een van de marktleiders op hun specifieke gebied, en inmiddels werken hier zo'n 50 medewerkers samen aan innoverende backoffice toepassingen. De software wordt gebruikt bij vele middelgrote en grote organisaties om zaken te regelen omtrent voorraadbeheer, managementinformatie, facturatie, bestellijsten en allerlei andere logistieke processen. Je komt hier te werken in een uitdagende en steeds veranderende branche waar constant gezocht wordt naar vernieuwing, onderscheidingsvermogen en optimale werkprocessen! De manier van werken hier voor het ICT team is professioneel, maar vrijheid en flexibiliteit is overal terug te zien. Zo werken er

Bekijk vacature »

Medior PHP Developer gezocht voor een snel groeien

Bedrijfsomschrijving De Organisatie waar jij komt te werken is constant bezig met het vernieuwen en ontwikkelen van innovatieve webapplicaties. Met +/- 5 mede Developers ben jij verantwoordelijk voor het onderhouden en doorontwikkelen van deze applicaties. Verder heeft deze organisatie een groot maatschappelijk belang en heb je als Developer veel ruimte voor eigen inbreng. Wekelijks groeit het aantal klanten en daarom ben ik ter versterking van het Development team op zoek naar een Medior en/of Senior Developer. Functieomschrijving Als PHP Developer ben je verantwoordelijk voor zowel de backend als de frontend. Je werkt met 4 collega's aan de doorontwikkeling van 3

Bekijk vacature »

Medior C# Developer

Samen met het development team zorg je ervoor dat alle systemen achter de schermen vlekkeloos werken. Wat doe je als Medior C# Developer bij Coolblue? Als C# developer doe je regelmatig mee aan brainstormsessies over user experience, data en task flow met de UX Designer, Product Owner en Data Scientist in je team. Daarnaast schrijf je op zichzelf staande, consistente en testbare code die goed onderhoudbaar en toekomstbestendig is. Ook C# Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen Werken met verschillende soorten data-opslag, zoals Oracle of AWS. Problemen oplossen

Bekijk vacature »

Lead Developer in het Spoordomein

Ben jij altijd degene in het team die de knopen doorhakt? Die samen met collega’s de best passende oplossing bepaalt? Wat ga je doen? Als Lead Developer ben je de spil tussen de klant en het ontwikkelteam. Je helpt aan de ene kant de Product Owner met het managen van de backlog en het realiseren van de business doelstellingen. En aan de andere kant zorg je voor een stabiele, flexibele software applicatie van hoge kwaliteit. Je zoekt continu naar verbeteringen in de architectuur, de gebruikte technologieën, het proces en de mensen. Je daagt je team uit om met goede ideeën

Bekijk vacature »

Senior C# Developer

You'll build modern applications for Coolblue back’s office. We have a lot of friends, and they crave well-structured data and user-friendly, task-focused applications. How do I become a Senior C# Developer at Coolblue? You regularly participate in brainstorm sessions about user experience, data, and task flow with the UX Designer, Product Owner, and Data Scientists in your team. Besides that you will create disconnected, highly congruent, and testable code that can easily be maintained and is future-proof. Want to become Senior C# Developer at Coolblue? Read below if the job suits you You enjoy doing this Working with various types

Bekijk vacature »

Azure Cloud Architect - Smart Logistics

Azure Cloud Architect - Smart Logistics Functiebeschrijving: Is Cloud jouw passie en Azure jouw expertise? Wil jij onze klanten in de logistieke sector helpen met hun digitale transformatie door het ontwerpen en implementeren van Microsoft Azure technologieën? Lees dan snel verder! Wat ga je doen? “Use digital to move smarter" De unit Smart Logistics binnen de Transport & Logistics sector van CGI ontwerpt, bouwt, beheer en onderhoudt veelal missie-kritische applicaties en data platforms die draaien in de Azure Cloud. Zonder de logistieke sector worden onze pakketjes niet op tijd afgeleverd, rijden de treinen niet meer van a naar b en

Bekijk vacature »

Email Front-End Developer

Creatieve HTML-er die de mooiste mails binnen no time kan bouwen. Wat doe je als Email Front-End Developer bij Coolblue? Droom jij in HTML en CSS? Weet jij als geen ander een ambitieus email design om te bouwen naar de werkelijke email? Zwem jij graag in je code om bestaande templates net weer een beetje beter te maken? Dan zoeken wij jou. Ook Email Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen De beste campagnes opbouwen voor de belangrijkste doelen Nieuwe mail templates ontwikkelen vanuit HTML en CSS of oude

Bekijk vacature »

allround systeembeheerder MSA

De Montessori Scholengemeenschap Amsterdam is een scholengroep voor voortgezet montessori-onderwijs in Amsterdam, met meerdere locaties in Amsterdam en in totaal ruim 450 medewerkers en 4200 leerlingen. De MSA heeft een lange traditie in het in stand houden en ontwikkelen van kwalitatief en hoogstaand voortgezet montessori-onderwijs. Het bedrijfsbureau vervult een ondersteunende functie voor de scholen en het bestuur. Doel van het bedrijfsbureau is om vraag- en resultaatgerichte dienstverlening te bieden waardoor het bestuur, de schooldirecties en alle medewerkers van de MSA hun werkzaamheden optimaal kunnen verrichten. Het bedrijfsbureau ondersteunt de scholen op het gebied van bedrijfsvoering en financiën, integraal personeelsbeleid, huisvesting,

Bekijk vacature »

C# .NET Developer @ Lelystad

2021-06-21 iSense C# .NET Developer Wil jij aan de slag als C# .NET software ontwikkelaar binnen een groeiende organisatie en je richten op uitdagende projecten voor verschillende klanten? Reageer dan snel! ISK49303 Nieuw Organisatie Als .NET Developer kom je te werken in de regio van Lelystad bij een organisatie die met toonaangevende klanten uit heel Nederland samen werkt. De producten en diensten van de organisatie bereiken miljoenen Nederlanders. Hierbij komt een grote hoeveelheid informatie kijken en deze moet discreet en veilig verwerkt worden. De processen die hierbij horen worden door het IT team vormgegeven. De organisatie heeft ook een adviserende

Bekijk vacature »
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

24/10/2021 02:12:12
 
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.