jQuery Select box namaken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mobile (iOS) Developer / Permanent contract / RELO

Bedrijfsomschrijving Are you an ambitious Mobile iOS developer and seeking for a unique job opportunity in The Netherlands? Then seek no more! This growing company in The Hague is currently growing rapidly and therefore looking for extra iOS developers. At this moment they are with 40 persons but due to the fact they are now opening offices in London and New York as well, they need extra hands for their development team. The company develops groundbreaking applications for the international telecommunications market. They have several products which help both private and business users worldwide. There is an international development team

Bekijk vacature »

Fullstack ontwikkelaar

Bedrijfsomschrijving Bij het accepteren van dit aanbod kom je terecht binnen een veelzijdige organisatie waar een goede sfeer hangt. Zij zijn gewend dagelijks met elkaar te lunchen en ruimte is voor een potje Mario. Als Fullstack ontwikkelaar ga je je op projectbasis bezighouden met het ontwikkelen van content voor diverse opdrachtgevers. De projecten waar je aan gaat werken zullen verschillende qua omvang. Hierbij kan je rekening houden met een gemiddelde doorlooptijd van een half jaar, waarbij er meerdere projecten naast elkaar kunnen lopen. De nadruk zal liggen op ontwikkeling aan de front-end, maar ook op het gebied van ontwikkeling aan

Bekijk vacature »

Javascript Developer (Angular/Node.js)

Bedrijfsomschrijving Ben jij een JavaScript developer en zoek je een nieuwe uitdaging binnen een inspirerende omgeving waarbij innovatie een belangrijke rol speelt? Dan ga je je hier zeker thuisvoelen! Deze organisatie zorgt dat bedrijven efficiënter en commercieel succesvoller worden. Dat doen ze door de combinatie van data en IT optimaal te gebruiken. Je komt terecht in een gepassioneerd team van 12 die allemaal een passie hebben voor data en IT. Je komt terecht in een prettige, informele en flexibele organisatie waar je met veel plezier aan de slag zal gaan. Door het succes zal het team de komende tijd/jaren verder

Bekijk vacature »

Full Stack Java Developer - Utilities

Ben jij een ontwikkelaar die wil bijdragen aan de energietransitie? Lees dan verder! Wat ga je doen? Als Full Stack Java Ontwikkelaar draag je verantwoordelijkheid voor het gehele proces van het omzetten van wensen, problemen of vragen naar concrete oplossingen. Integratie, testen, vastleggen van kennis en beslissingen, problem management en automation zijn onderdeel van je takenpakket in zowel SAFE of DevOps gestuurde omgevingen als ook in omgevingen die nog werken volgens het traditionele waterval model. Als ontwikkelaar krijg je alle mogelijkheden om je technisch verder te ontwikkelen en samen te werken met gedreven collega's. Wat breng je mee? Je hebt

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 »

Application Developer Tech Lead

We’re Hiring! A UPS Application Developer Tech Lead *REMOTE WORK POSSIBLE FOR THIS ROLE As a Tech Lead Developer at UPS you work on delivering functionality for highly complex IT systems. You collaborate in agile teams and participate in emerging technologies and processes like CI/CD and DevOps to ensure that we meet our objectives effectively and efficiently. Your primary role is to perform full system life cycle activities, e.g. analysis, technical requirements, design, coding, testing and the implementation of software. Working in our Europe development center in Eindhoven means working in an international team with onsite people as well as

Bekijk vacature »

PHP Symfony (3) Developer

Bedrijfsomschrijving Onze klant is een dienstverlenend bedrijf die een eigen facturatiesysteem heeft ontwikkeld waar men zich met een relatief klein team (circa 20 mensen) dagelijks inzet om mooie en slimme applicaties te ontwikkelen. Ze groeien nog altijd echter nemen niet elke opdracht aan en ze kiezen als bedrijf alleen voor de projecten waar de meeste uitdaging in te vinden is. Het is een leuke en prettige partij om bij te werken en er is ook veel ruimte om met nieuwe technieken (lees: Symfony 3) aan de slag te gaan en deze uit te proberen. Functieomschrijving Samen met je collega’s ben

Bekijk vacature »

Senior .NET Developer gezocht (C#, .NET Core, Azur

Bedrijfsomschrijving Mijn klant is een middelgrote organisatie, gevestigd in Wassenaar. In totaal werken hier inmiddels ruim 25 personen, waarvan ongeveer de helft als Software Developer werkt. Het is een uiterst professionele organisatie waar ontzettend mooie producten gebouwd worden, maar waar toch een hele prettige en informele sfeer hangt. Iedereen krijgt de ruimte om zichzelf te zijn en ieder zijn inbreng wordt gewaardeerd. Dit is ook een belangrijke kernwaarde binnen de organisatie; iedereen moet zichzelf kunnen zijn en de ruimte krijgen om binnen een relaxte sfeer zichzelf verder te ontwikkelen. Het is een financieel gezonde organisatie waar, dankzij aanhoudende groei, nu

Bekijk vacature »

Java Software Developer – Smart Logistics

Bouw jij de professionele applicaties die onze klanten zo hard nodig hebben? En wil je graag met de nieuwste technologieën werken binnen een DevOps team? 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 en onderhoudt veelal missie-kritische applicaties voor onze klanten uit de transport en logistieke sector. Zonder deze sector worden onze pakketjes niet op tijd afgeleverd, rijden de treinen niet meer van a naar b en varen schepen niet veilig de haven binnen. Om deze transport en logistieke ketens te

Bekijk vacature »

Backend Developer XQuery

Bedrijfsomschrijving Voor een vooruitstrevende organisatie binnen de zorg in Den Haag zijn wij opzoek naar een Back-end Developer die ervaring heeft met XQuery en Vue.JS. Je zal ontwikkelen aan een tof en complex zorgplatform en koppelingen maken met de NoSQL database. Ook het testen en documenteren van de ontwikkelde functionaliteiten behoort tot zijn verantwoordelijkheden. Door COVID zoeken ze iemand die goed in staat in zelfstandig vanuit huis te werken. Functieomschrijving Ben jij een Back-end Developer en heb je ervaring met XQuery, NoSQL-databases, JSON en REST API's? Wil je meewerken aan een grootschalig project binnen een vooruitstrevende zorg omgeving? Reageer dan

Bekijk vacature »

Full-stack Java Developer

Functieomschrijving Wil jij continu een organisatie en processen optimaliseren? Maak jij graag IT applicaties die impact hebben? Wil jij jezelf en Nederland in beweging houden? Wat ga je doen als Full-stack Java Developer bij Randstad Nederland? Als je als full-stack java developer ergens impact hebt, dan is het hier wel. Wij ondersteunen onze HR-dienstverlening met hightech apps en software, die we continu verbeteren. Zodat onze mensen ervoor kunnen zorgen dat bijvoorbeeld jouw koffer op de band terecht komt op het vliegveld, jouw pakketjes netjes op tijd worden geleverd en goed verzorgt wordt in het ziekenhuis. Onze innovaties volgen elkaar in

Bekijk vacature »

Developer Powershell

Bedrijfsomschrijving Je komt als Developer Powershell te werken in de omgeving Deventer/Apeldoorn bij een nationaal opererende organisatie. Ze blijven constant in beweging en zijn altijd bezig om de laatste innovaties door te voeren. De organisatie werkt met grote hoeveelheden data, zij richten zich zowel op de B2B als B2C markten en zijn pionier binnen hun gebied van expertise. De applicaties draaiende op het platform verwerken per maand aanvragen voor meer dan 6 miljoen gebruikers en jij mag een rol gaan spelen in de complexe technieken en infrastructuur dat schuilt rondom deze applicaties! Je komt in een team waarbij de helft

Bekijk vacature »

Back-end Developer

Cube in Twente is op zoek naar een Back-end Developer Medior / Senior Functie omschrijving Als Back-end Developer bouw je met jouw kennis de beste oplossingen voor de vragen van onze klanten en kun je goed onderbouwen waarom nu juist déze techniek het beste aansluit bij zijn wensen. Daarnaast sta je ervoor open je kennis te delen met je collega developers. Op deze manier haal jij het maximale uit de samenwerking met de klant en til jij je collega’s naar een hoger niveau. We zijn gegroeid door focus te houden op het plezier van het team en op de details

Bekijk vacature »

Sr. Oracle Developer

Bedrijfsomschrijving Als ervaren DevOps Engineer zal je verantwoordelijk zijn voor de ontwikkeling van nieuwe webapplicaties door middel van Oracle APEX en PL/SQL. Je houdt je bezig met het realiseren van mooie en innovatieve oplossingen, voortstormend uit de requirements die je hebt achterhaald bij diverse stakeholders. Naast web development ben je tevens verantwoordelijk voor het onderhouden een groot aantal complexe applicaties, het analyseren van problemen en hierbij met bruikbare oplossingen komen. Als onderdeel van een scrum team ondersteun je je DevOps collega's waar nodig en zorg je samen met hem voor het optimaliseren van de bedrijfssystemen. De organisatie is een energieleverancier

Bekijk vacature »

Junior PHP Developer

Je maakt een vliegende start van je carrière door meteen mee te bouwen aan dingen zoals een optimaal werkende website aan de hand van je PHP kennis. Wat doe je als Junior PHP Developer bij Coolblue? Als Junior PHP Developer ben je meteen vanaf de start onderdeel van een development team. Je kijkt veel mee met collega’s en volgt trainingen om te groeien als Junior Developer. Op dat moment komt je wil om steeds te blijven leren naar boven. Daarnaast pak je in de sprints ook je eigen stories op om Coolblue iedere dag een beetje beter te kunnen maken.

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

13/05/2021 18:15:11
 
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.