我在 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>
一种方法，第一个是数组，第二个是对象：
<select name="">
<option value='{"num_sequence":[0,1,2,3]}'>Option one</option>
<option value='{"foo":"bar","one":"two"}'>Option two</option>
</select>
我通过使用 PHPexplode函数实现了它，如下所示：
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 个值，它有一个分隔符（在本例中为“|”）来拆分值（在本例中为模型和颜色）。
在操作页面上，我将结果分解为一个数组，然后调用每个数组。如您所见，我已经将它们分开并标记了它们，因此您可以看到它造成的影响。
它可以在一个选择选项中有多个值，如下所示。
<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>
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>如果您的目标是将此信息写入数据库，那么为什么您需要在value属性中具有主值和“相关”值？为什么不只是将主要值发送到数据库，让数据库的关系性质来处理其余的事情。
如果您需要在OPTIONs 中有多个值，请尝试使用不太常见的分隔符：
<OPTION VALUE="1|2010">One</OPTION>
或添加对象文字（JSON 格式）：
<OPTION VALUE="{'primary':'1','secondary':'2010'}">One</OPTION>
这真的取决于你想要做什么。
我通过使用数据属性做到了这一点。比尝试爆炸等的其他方法清洁得多。
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);
});
为每个选项设置值，例如
<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([delimeter],[posted value]);之类的函数
$values = explode(':',$_POST['val']
上面的代码返回一个只有数字和“：”的数组被删除
在 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
最简单的方法：
<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
使用分隔符分隔值。
<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 中不允许重复的标记参数。你能做的，是VALUE="1,2010"。但是您必须解析服务器上的值。
代替将选项存储在客户端，另一种方法是将选项存储为服务器端的关联/索引数组的子数组元素。然后，选择标记的值将只包含用于取消引用子数组的键。
这是一些示例代码。这是用 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>';
这对其他人可能有用也可能没有用，但对于我的特定用例，我只是希望在选择选项时从表单传回其他参数 - 这些参数对于所有选项具有相同的值，所以......我的解决方案是通过选择在表单中包含隐藏的输入，例如：
<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="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>
我使用数据属性通过简单的 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>
这里的数据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>
你可以使用多个属性
<SELECT NAME="Testing" multiple>
<OPTION VALUE="1"> One
<OPTION VALUE="2"> Two
<OPTION VALUE="3"> Three