Question

我正在尝试创建一个选择“下拉菜单”，其中包含每个选项中的多个值。像这样的东西：

<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>

请告诉我如何继续并感谢你

Answer 1

您无法在选项中添加多个值。相反，你可以使用数据集（html5），如：

<select id="myselect">
 <option data-this="foo" data-that="bar">
</select>

读取这些值的javascript是：

var d = document.getElementById("myselect");
var _this = d.options[d.selectedIndex].dataset["this"];
var _that = d.options[d.selectedIndex].dataset["that"];

如果您不想弄乱数据集，可以存储JSON对象：

...
<option value='<?php echo json_encode(array("foo"=>1,"bar"=>2)); ?>'>
...

并提取如下数据：

var d = document.getElementById("myselect");
var option_value = JSON.parse( d.options[d.selectedIndex].value );

来源：embedding multiple values in options of <select>

Answer 2

你可以这样做

<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>

并在客户端上的脚本或服务器上的类似脚本中使用split

Answer 3

您可以轻松使用简单技巧，因为您可以使用值属性中的:之类的分隔符连接所有值。

当你在php中获取值时，只需将其爆炸，然后你将获得所需的所有值。

<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>

现在在php中你只需要这样做：

<?php

$value = $post['zone']; // assuming form method is post
$values = explode(':',$value);
$value_1 = $values[0];
 $value_2 = $values[1];
$value_3 = $values[2];
?>

希望它有用：）

Answer 4

所以如果我明白你们所说的话我能做到这一点吗？：

<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>

Answer 5

我发现了怎么做 ....这是我的最终代码..谢谢:)大家..

<!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>

如何创建具有多值的选择

5 个答案: