i'm trying to create a select " dropdown menu " which contains multi values in each option.. something like this :
<select id="select" name="zone">
<option value="val1" value="val2" value="val3">zone1</option>
<option value="v1" value="v2" value="v3">zone2</option>
<option value="valu1" value="valu2" value="valu3">zone3</option>
</select>
please tell me how to proceed and thank you
you cannot add many values in an option. instead you can use datasets (html5), like:
<select id="myselect">
<option data-this="foo" data-that="bar">
</select>
the javascript to read these values is:
var d = document.getElementById("myselect");
var _this = d.options[d.selectedIndex].dataset["this"];
var _that = d.options[d.selectedIndex].dataset["that"];
if you dont want to mess with datasets, you can store a JSON object:
...
<option value='<?php echo json_encode(array("foo"=>1,"bar"=>2)); ?>'>
...
and extract the data like:
var d = document.getElementById("myselect");
var option_value = JSON.parse( d.options[d.selectedIndex].value );
You could do this
<select id="select" name="zone">
<option value="val1,val2,val3">zone1</option>
<option value="v1,v2,v3">zone2</option>
<option value="valu1,valu2,valu3">zone3</option>
</select>
and use split in a script on the client or similar on the server
Its easy you can use simple trick as you can concatenate all the value with a separator such as : in the value attribute.
and as you get the value in php just explode it and you will have all the values as required.
<select id="select" name="zone">
<option value="val1:val2:val3">zone1</option>
<option value="v1:v2:v3">zone2</option>
<option value="valu1:valu2:valu3">zone3</option>
</select>
Now in php you just need to do that:
<?php
$value = $post['zone']; // assuming form method is post
$values = explode(':',$value);
$value_1 = $values[0];
$value_2 = $values[1];
$value_3 = $values[2];
?>
Hope it was useful :)
so if I understand what you all told me I can do this ?:
<form>
<select class="target">
<?php // loading rectangles from database
$dbname ='zone'; //Name of the database
$dbuser ='root'; //Username for the db
$dbpass =''; //Password for the db
$dbserver ='localhost'; //Name of the mysql server
$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db($dbname) or die(mysql_error());
$query = mysql_query("SELECT * FROM ville");
while ($row = mysql_fetch_array($query))
{
$name=$row['NOM_VILLE'];
$lat1=$row['LATITUDE1_V'];
$lon1=$row['LONGITUDE1_V'];
$lat2=$row['LATITUDE2_V'];
$lon2=$row['LONGITUDE2_V'];
echo "<option value=".$lat1.",".$lon1.",".$lat2.",".$lon2.">".$name."</option>";
}
?>
</select>
</form>
I found out how to do it .... and this is my final code .. thanks :) everybody..
<!DOCTYPE html>
<html>
<?php
include_once("config.php");
?>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
width: 500px;
height: 500px;
left;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
//var bounds;
function addRectangle(lat1, lon1, lat2, lon2)
{
var Bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(lat1, lon1),
new google.maps.LatLng(lat2, lon2)
);
var rectangle = new google.maps.Rectangle({
bounds: Bounds,
//draggable: true,
//editable: true,
map : map,
});
//rectangle.setMap(map);
}
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(44.490, -78.649),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
<?php // loading rectangles from database
$dbname ='zone'; //Name of the database
$dbuser ='root'; //Username for the db
$dbpass =''; //Password for the db
$dbserver ='localhost'; //Name of the mysql server
$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db($dbname) or die(mysql_error());
$query = mysql_query("SELECT * FROM ville");
while ($row = mysql_fetch_array($query))
{
$name=$row['NOM_VILLE'];
$lat1=$row['LATITUDE1_V'];
$lon1=$row['LONGITUDE1_V'];
$lat2=$row['LATITUDE2_V'];
$lon2=$row['LONGITUDE2_V'];
echo "addRectangle($lat1, $lon1, $lat2, $lon2);";
}
?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<?php // loading makers from database
$dbname ='zone'; //Name of the database
$dbuser ='root'; //Username for the db
$dbpass =''; //Password for the db
$dbserver ='localhost'; //Name of the mysql server
$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
mysql_select_db($dbname) or die(mysql_error());
$query = mysql_query("SELECT * FROM ville");
while ($row = mysql_fetch_array($query))
{
$name=$row['NOM_VILLE'];
$lat1=$row['LATITUDE1_V'];
$lon1=$row['LONGITUDE1_V'];
$lat2=$row['LATITUDE2_V'];
$lon2=$row['LONGITUDE2_V'];
//$desc=$row['zone'];
echo " ".$lat1.", ".$lon1.",".$lat2.", ".$lon2."";
//echo "addMarker($lat, $lon,'<b>$name</b><br/>$desc');";
}
?>
</body>
</html>