Select 标签中的 Option 可以携带多个值吗？答案

【问题标题】：Can an Option in a Select tag carry multiple values?Select 标签中的 Option 可以携带多个值吗？
【发布时间】：2023-03-03 01:37:02
【问题描述】：

我在 HTML 表单中有一个带有一些选项的选择标签：
（数据将使用 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>

【问题讨论】：

你是用php作为服务器脚本来处理
只是好奇你为什么需要这个？
@Salil。出于好奇是否可以这样做
stackoverflow.com/questions/38180525/… 为我工作。

标签： html options

【解决方案1】：

一种选择是用逗号分隔多个值

喜欢

value ="123,1234"

并在服务器端将它们分开

【讨论】：

如何在服务器端将它们分开？（在 php 中）
点赞功能

【解决方案2】：

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

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

【讨论】：

+1 优雅的解决方案。注：如果您使用选项二，那么我建议您在更改事件中使用 $.parseJSON($(this).val()) 来获取 javascript 对象，假设您需要分别获取每个值。
-1 因为这个答案导致 OP 在评估输入时在他的代码中存在很大的安全问题。避免这种情况的最佳方法是使用 JSON，正如 @DavidHoerster 所建议的那样，因为输入的行为更好。
@fotanus：我的第二个示例 is 是一个 JSON 对象文字，与其他问题的建议没有什么不同。至于数组，只是一个例子。无论如何，清理输入值是服务器端代码的责任。
@Robusto 第二个示例不是有效的 JSON。另一方面，它是一个红宝石哈希。我对您的回答的问题不在于您解释或知道什么（因为我相信您知道如何确保安全），而在于它遗漏了什么并可能使新手开发人员感到困惑（就像我的一个朋友一样）。
很好的解决方案，但是对于要解析为 JSON 的字符串，属性名称必须有双引号，如下所示： value='{"foo":"bar","one":"两个"}'

【解决方案3】：

HTML 中不允许重复的标记参数。你可以做的是VALUE="1,2010"。但是您必须在服务器上解析该值。

【讨论】：

【解决方案4】：

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

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

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

或添加一个对象字面量（JSON 格式）：

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

这真的取决于你想要做什么。

【讨论】：

【解决方案5】：

为每个选项设置值

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

在服务器端，如果是 PHP，使用explode 之类的函数 [array] = explode([demeter],[posted value]);

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

上面的代码返回一个只有数字的数组，':'被删除

【讨论】：

【解决方案6】：

我是通过使用 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 />";
    ?>

正如您在第一段代码中所见，我们正在创建一个标准的 HTML 选择框，其中包含 2 个选项。每个选项都有 1 个值，它有一个分隔符（在本例中为“|”）来拆分值（在本例中为模型和颜色）。

在操作页面上，我将结果分解为一个数组，然后调用每个数组。如您所见，我已将它们分开并标记，以便您查看其造成的影响。

【讨论】：

我觉得这个方法很简单也很有帮助，但是我想知道这个方法是不是所有浏览器都支持？
@WaiylKarim 没有理由为什么它不应该在所有浏览器中工作。浏览器不应该关心值是什么。如果他们对其中的某些符号有问题，选择另一个没有问题。像点或#或_或任何可用作服务器端分隔符的字符

【解决方案7】：

当我需要这样做时，我将其他值设为数据值，然后使用 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>

【讨论】：

这让我参与其中——此外，如果您已经有一个元素（与执行选择器查询相比），也可以使用 .data() 将它们取出。例如myElem.data('othervalue')
从技术上讲，这不是 OP 所要求的，但这是我在这里搜索时想要完成的 100%。 +1 表示我认为的最终目标是在一个选择选项中简单地存储两条数据的简单、更好的路径。

【解决方案8】：

你可以使用多个属性

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

【讨论】：

他想从一个选择中获得多位信息，而不是多个选择。

【解决方案9】：

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

<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'));
});

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

【讨论】：

【解决方案10】：

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

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

});

【讨论】：

【解决方案11】：

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

这是一些示例代码。这是用 PHP 编写的，因为 OP 提到了 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>';

【讨论】：

【解决方案12】：

使用分隔符分隔值。

<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];
?>

【讨论】：

【解决方案13】：

在 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

【讨论】：

【解决方案14】：

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>

【讨论】：

"data-" 需要这个才能工作，第二部分需要小写。

【解决方案15】：

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

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

也许很明显……看过之后会更明显。

【讨论】：

【解决方案16】：

最简单的方法：

<select name="demo_select">
    <option value='{"key1":"111","key2":"222"}'>option1</option>
    <option value='{"key1":"333","key2":"444"}'>option2</option>
</select>

在控制器上解码请求值如下：

$values = json_decode($request->post('demo_select'));
$val1 = $values->key1;
$val2 = $values->key2;
echo "Value 1: ".$val1;
echo "Value 2: ".$val2;

第一个选项的输出：

Value 1: 111
Value 2: 222

第二个选项的输出：

Value 1: 333
Value 2: 444

【讨论】：

【解决方案17】：

        <select name="student" id="student">

                <option value="">Select Student</option>

                <option value="Student Name|Roll No">Student Name</option>

        </select>

        <input type="submit" name="submit" id="submit" value="submit"></form>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案18】：

我使用数据属性通过简单的 javascript 和刀片模板获取值。

<select class="form-control" id="channelTitle" name="channelTitle" onchange="idChannels()">
                    @foreach($post['channels'] as $channels)
                        <option value="{{ $channels->channel_title }}" data-id="{{ $channels->channel_id }}">{{ $channels->channel_title }}</option>
                    @endforeach
                </select>

这里是data-id结果

<div class="form-group">
                <strong>Channel Id:</strong>
                <input type="text" name="channelId" id="channelId" class="form-control" placeholder="Channel Id">
            </div>

javascript

<script>
function idChannels(){
    var elem=document.getElementById("channelTitle");
    var id = elem.options[elem.selectedIndex].getAttribute('data-id');

    document.getElementById("channelId").value = id;
} </script>

【讨论】：