如何创建具有多值的选择[重复]答案

【问题标题】：How to create a select with multi value [duplicate]如何创建具有多值的选择[重复]
【发布时间】：2013-08-13 13:58:54
【问题描述】：

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

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

请告诉我如何进行，谢谢

【问题讨论】：

也许this 会有所帮助。
每个选项都有一个值。如果你想有多个值，你可以给出逗号分隔的值，然后在提交时用逗号分隔它们。
您不能多次设置同一个属性。所以这里的值属性在你的选项标签中不止一次，这是错误的。
您能否详细说明您要达到的目标？
我正在尝试取回存储在数据库中的区域边界，并将主题放在选择中的 on Option 值中，以便我可以通过每次单击区域来更改地图边界

标签： javascript jquery html

【解决方案1】：

你可以这样做

<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

【讨论】：

感谢它的帮助

【解决方案2】：

您可以使用简单的技巧很容易，因为您可以在 value 属性中使用分隔符（例如 :）连接所有值。

当您在 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];
?>

希望它有用:)

【讨论】：

感谢 Rahul :) 请告诉我，如果我使用 php 变量，是否也一样？
是的，你也可以使用 php 变量。如果我的回答是正确且有帮助的，我值得一票.. :)

【解决方案3】：

所以如果我明白你们都告诉我的我可以做到这一点？：

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

【讨论】：

【解决方案4】：

您不能在一个选项中添加多个值。相反，您可以使用数据集 (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>

【讨论】：

【解决方案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>

【讨论】：