Select标记中的选项可以携带多个值吗？

我得到了带有HTML表单中某些选项的select标签：（
数据将使用PHP收集和处理）

测试：

<select name="Testing">  
  <option value="1"> One  
  <option value="2"> Two  
  <option value="3"> Three
</select>

一个选项是否可能带有多个值，例如当用户选择“一个”时，那么与此选项相关的其他一些值将被写入数据库。

我应该如何设计select标签，以便每个选项都可以带有一个以上的值，如下所示：

<select name="Testing">  
  <option value="1" value="2010"> One  
  <option value="2" value="2122"> Two  
  <option value="3" value="0"> Three
</select>

一种方法是，第一个是数组，第二个是对象：

    <select name="">
        <option value='{"num_sequence":[0,1,2,3]}'>Option one</option>
        <option value='{"foo":"bar","one":"two"}'>Option two</option>
    </select>

JSON.stringify()由于抱怨我的概念证明答案“可能会使新手开发人员感到困惑”，因此对其进行了编辑（在回答3年后）将这两个值都放入JSON格式（使用）。

我实际上今天想知道这一点，并且通过使用php explode函数实现了它，如下所示：

HTML表单（在我名为“ doublevalue.php”的文件中：

    <form name="car_form" method="post" action="doublevalue_action.php">
            <select name="car" id="car">
                    <option value="">Select Car</option>
                    <option value="BMW|Red">Red BMW</option>
                    <option value="Mercedes|Black">Black Mercedes</option>
            </select>
            <input type="submit" name="submit" id="submit" value="submit">
    </form>

PHP操作（在我名为doublevalue_action.php的文件中）

    <?php
            $result = $_POST['car'];
            $result_explode = explode('|', $result);
            echo "Model: ". $result_explode[0]."<br />";
            echo "Colour: ". $result_explode[1]."<br />";
    ?>

如您在第一段代码中所见，我们正在创建一个带有2个选项的标准HTML选择框。每个选项都有1个值，该值有一个分隔符（在这种情况下为'|'），用于拆分值（在这种情况下为型号和颜色）。

在操作页面上，我将结果分解为一个数组，然后调用每个数组。如您所见，我将它们分开并标记了标签，以便您可以看到这引起的影响。

我希望这可以帮助别人 ：）

如下所示，在选择选项中可能有多个值。

<select id="ddlEmployee" class="form-control">
    <option value="">-- Select --</option>
    <option value="1" data-city="Washington" data-doj="20-06-2011">John</option>
    <option value="2" data-city="California" data-doj="10-05-2015">Clif</option>
    <option value="3" data-city="Delhi" data-doj="01-01-2008">Alexander</option>
</select>

您可以使用jquery在更改事件中获取选定的值，如下所示。

$("#ddlEmployee").change(function () {
     alert($(this).find(':selected').data('city'));
});

您可以在此链接中找到更多详细信息

一种选择是将多值加逗号分隔

喜欢

value ="123,1234"

并在服务器端将它们分开

当需要执行此操作时，我将其他值设置为数据值，然后使用js将其分配给隐藏的输入

<select id=select>
<option value=1 data-othervalue=2 data-someothervalue=3>
//...
</select>

<input type=hidden name=otherValue id=otherValue />
<input type=hidden name=someOtherValue id=someOtherValue />

<script>
$('#select').change(function () {
var otherValue=$(this).find('option:selected').attr('data-othervalue');
var someOtherValue=$(this).find('option:selected').attr('data-someothervalue');
$('#otherValue').val(otherValue);
$('#someOtherValue').val(someOtherValue);
});
</script>

如果您的目标是将此信息写入数据库，那么为什么需要在value属性中具有主值和“相关”值？为什么不只是将主要值发送到数据库，而让数据库的关系性质来处理其余部分。

如果您需要在中包含多个值，请OPTION尝试使用不太常见的分隔符：

<OPTION VALUE="1|2010">One</OPTION>

...

或添加对象文字（JSON格式）：

<OPTION VALUE="{'primary':'1','secondary':'2010'}">One</OPTION>

...

这实际上取决于您要执行的操作。

为每个选项设置值

<SELECT NAME="val">
   <OPTION VALUE="1" value="1:2:3:4"> 1-4  
   <OPTION VALUE="2" value="5:6:7:8"> 5-8  
   <OPTION VALUE="3" value="9:10:11:12"> 9-12
</SELECT>

如果是php，则在服务器端使用诸如explode [array] = explode（[delimeter]，[posted value]）之类的函数；

$values = explode(':',$_POST['val']

上面的代码返回一个仅包含数字和'：'的数组

我通过使用数据属性来做到这一点。比其他尝试爆炸的方法干净得多。

的HTML

<select class="example">
    <option value="1" data-value="A">One</option>
    <option value="2" data-value="B">Two</option>
    <option value="3" data-value="C">Three</option>
    <option value="4" data-value="D">Four</option>
</select>

JS

$('select.example').change(function() {

    var other_val = $('select.example option[value="' + $(this).val() + '"]').data('value');

    console.log(other_val);

});

html数据属性呢？那是最简单的方法。来自w3school的参考

就你而言

$('select').on('change', function() {
  alert('value a is:' + $("select option:selected").data('valuea') +
    '\nvalue b is:' + $("select option:selected").data('valueb')
  )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select name="Testing">
  <option value="1" data-valuea="2010" data-valueb="2011"> One
    <option value="2" data-valuea="2122" data-valueb="2123"> Two
      <option value="3" data-valuea="0" data-valueb="1"> Three
</select>

使用定界符分隔值。

<select name="myValues">
<option value="one|two">
</select>

<?php>
$value = filter_input(INPUT_POST, 'myValues');
$exploded_value = explode('|', $value);
$value_one = $exploded_value[0];
$value_two = $exploded_value[1];
?>

在HTML中

<SELECT NAME="Testing" id="Testing">  
  <OPTION VALUE="1,2010"> One  
  <OPTION VALUE="2,2122"> Two  
  <OPTION VALUE="3,0"> Three
</SELECT>

对于JS

  var valueOne= $('#Testing').val().split(',')[0];
  var valueTwo =$('#Testing').val().split(',')[1];
  console.log(valueOne); //output 1
  console.log(valueTwo); //output 2010

或对于PHP

  $selectedValue= explode(',', $value);
  $valueOne= $exploded_value[0]; //output 1
  $valueTwo= $exploded_value[1]; //output 2010

HTML中不允许使用重复的标记参数。您可以做的是VALUE="1,2010"。但是您将不得不解析服务器上的值。

代替将选项存储在客户端上，另一种方法是将选项存储为服务器端上关联/索引数组的子数组元素。然后，select标签的值将仅包含用于取消引用子数组的键。

这是一些示例代码。自从OP提到PHP以来，这就是用PHP编写的，但是它可以适应您所使用的任何服务器端语言：

<FORM action="" method="POST">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>
    </SELECT>
</FORM>

PHP：

<?php
$options = array(
    1 => array('value1' => '1', 'value2' => '2010'),
    2 => array('value1' => '2', 'value2' => '2122'),
    3 => array('value1' => '3', 'value2' => '0'),
);
echo 'Selected option value 1: ' . $options[$_POST['Testing']]['value1'] . '<br>';
echo 'Selected option value 2: ' . $options[$_POST['Testing']]['value2'] . '<br>';

这可能对其他人有用，也可能没有用，但是对于我的特定用例，我只是希望在选择选项时从表单中传回其他参数-这些参数对于所有选项都具有相同的值，所以...我的解决方案将带有select的表单中的隐藏输入包括在内，例如：

<FORM action="" method="POST">
    <INPUT TYPE="hidden" NAME="OTHERP1" VALUE="P1VALUE">
    <INPUT TYPE="hidden" NAME="OTHERP2" VALUE="P2VALUE">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>
    </SELECT>
</FORM>

也许很明显……看到后更加明显。

您可以使用多个属性

<SELECT NAME="Testing" multiple>  
 <OPTION VALUE="1"> One  
 <OPTION VALUE="2"> Two  
 <OPTION VALUE="3"> Three