My Problem was: Add a value to a div element in a dropdown list.
Ok Guys, I've resolved my problem with the help of @David.
I've always wanted to know how to design the <select> <option> tags, but now I think I found a solution to get away from them and use whatever element I want. Ok here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function getValue(value){
var valueHolder = document.getElementById('valueHolder');
valueHolder.value = value;
}
function toggle(id){
var element = document.getElementById(id);
if(element.style.display == "none"){
element.style.display = "block";
} else {
element.style.display = "none";
}
}
</script>
</head>
<body>
<form action="test2.php" method="post">
<input type="hidden" id="valueHolder" value="" name="valueHolder"></input>
<div onclick="toggle('dropdown');">Show Dropdown</div>
<div class="dropdown" id="dropdown" style="display:none;">
<div class="option" onclick="getValue('red')">Red</div>
<div class="option" onclick="getValue('green')">Green</div>
</div>
<input type="submit" name="submit" />
<?php
if(isset($_POST['submit'])){
echo $_POST['valueHolder'];
}
?>
</form>
</body>
</html>
It's a bit ugly but check it out, works! Don't forget to run on a server.
Best Regards, Adam