Html Select 标签中的 Option 可以携带多个值吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3245967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can an Option in a Select tag carry multiple values?
提问by user327712
I got a select tag with some options in a HTML form:
(the data will be collected and processed using PHP)
我在 HTML 表单中得到了一个带有一些选项的选择标签：（
将使用 PHP 收集和处理数据）
Testing:
测试：
<select name="Testing">
<option value="1"> One
<option value="2"> Two
<option value="3"> Three
</select>
Is it possible for an option to carry multiple values like when a user selects "One", then a few other values related to this option will be written to the Database.
一个选项是否可以携带多个值，例如当用户选择“一”时，那么与此选项相关的其他一些值将被写入数据库。
How should I design the selectTag so that each of the options can carry one than one value like this:
我应该如何设计select标签，以便每个选项都可以携带一个以上的值，如下所示：
<select name="Testing">
<option value="1" value="2010"> One
<option value="2" value="2122"> Two
<option value="3" value="0"> Three
</select>
回答by Robusto
One way to do this, first one an array, 2nd an object:
一种方法是，第一个是数组，第二个是对象：
<select name="">
<option value='{"num_sequence":[0,1,2,3]}'>Option one</option>
<option value='{"foo":"bar","one":"two"}'>Option two</option>
</select>
Edited (3 years after answering) to put both values into JSON format (using JSON.stringify()) because of a complaint that my proof-of-concept answer "could confuse a newbie developer."
编辑（回答后 3 年）将两个值都放入 JSON 格式（使用JSON.stringify()），因为有人抱怨我的概念验证答案“可能会使新手开发人员感到困惑”。
回答by Nedra
I was actually wondering this today, and I achieved it by using the php explode function, like this:
我今天真的很想知道这个，我通过使用php爆炸函数实现了它，如下所示：
HTML Form (in a file I named 'doublevalue.php':
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 action (in a file I named doublevalue_action.php)
PHP 操作（在我命名为 doublevalue_action.php 的文件中）
<?php
$result = $_POST['car'];
$result_explode = explode('|', $result);
echo "Model: ". $result_explode[0]."<br />";
echo "Colour: ". $result_explode[1]."<br />";
?>
As you can see in the first piece of code, we're creating a standard HTML select box, with 2 options. Each option has 1 value, which has a separator (in this instance, '|') to split the values (in this case, model and colour).
正如您在第一段代码中看到的，我们正在创建一个标准的 HTML 选择框，有 2 个选项。每个选项都有 1 个值，它有一个分隔符（在本例中为“|”）以分割值（在本例中为型号和颜色）。
On the action page, I'm exploding the results into an array, then calling each one. As you can see, I've separated and labelled them so you can see the effect this is causing.
在操作页面上，我将结果分解为一个数组，然后调用每个数组。如您所见，我已将它们分开并进行了标记，以便您可以看到这造成的影响。
I hope this helps someone :)
我希望这可以帮助别人 ：）
回答by Vara
its possible to have multiple values in a select option as shown below.
在一个选择选项中可能有多个值，如下所示。
<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>
you can get selected value on change event using jquery as shown below.
您可以使用 jquery 获取更改事件的选定值，如下所示。
$("#ddlEmployee").change(function () {
alert($(this).find(':selected').data('city'));
});
You can find more details in this LINK
您可以在此链接中找到更多详细信息
回答by Haim Evgi
one option is to put multi value with comma seperated
一种选择是用逗号分隔多值
like
喜欢
value ="123,1234"
and in the server side separate them
并在服务器端将它们分开
回答by chiliNUT
When I need to do this, I make the other values data-values and then use js to assign them to a hidden input
当我需要这样做时，我将其他值设为数据值，然后使用 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>
回答by David Hoerster
If you're goal is to write this information to the database, then why do you need to have a primary value and 'related' values in the valueattribute? Why not just send the primary value to the database and let the relational nature of the database take care of the rest.
如果您的目标是将此信息写入数据库，那么为什么需要在value属性中具有主值和“相关”值？为什么不将主要值发送到数据库，让数据库的关系性质来处理其余的事情。
If you need to have multiple values in your OPTIONs, try a delimiter that isn't very common:
如果您的OPTIONs 中需要有多个值，请尝试使用不太常见的分隔符：
<OPTION VALUE="1|2010">One</OPTION>
...
...
or add an object literal (JSON format):
或添加对象字面量（JSON 格式）：
<OPTION VALUE="{'primary':'1','secondary':'2010'}">One</OPTION>
...
...
It really depends on what you're trying to do.
这真的取决于你想要做什么。
回答by Jaison Justus
put values for each options like
为每个选项设置值，例如
<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>
at server side in case of php, use functions like explode [array] = explode([delimeter],[posted value]);
在服务器端，如果是 php，请使用诸如 expand [array] = expand([delimeter],[posted value]) 之类的函数；
$values = explode(':',$_POST['val']
the above code return an array have only the numbers and the ':' get removed
上面的代码返回一个数组，只有数字和 ':' 被删除
回答by Hyman
I did this by using data attributes. Is a lot cleaner than other methods attempting to explode etc.
我通过使用数据属性来做到这一点。比其他尝试爆炸的方法等要干净得多。
HTML
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
JS
$('select.example').change(function() {
var other_val = $('select.example option[value="' + $(this).val() + '"]').data('value');
console.log(other_val);
});
回答by Ankit
What about html data attributes? That's the easiest way. Reference from w3school
html数据属性呢？这是最简单的方法。来自w3school 的参考
In your case
在你的情况下
$('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>回答by Chad C.
Use a delimiter to separate the values.
使用分隔符来分隔值。
<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];
?>
