jQuery Select box namaken

Door Dennis Mertens op 08-04-2009 14:43

2.991 views

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


<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