Select标签中的Option是否可以包含多个值？

Question

我有一个带有HTML表单选项的select标签:(
数据将被收集并使用PHP处理)

测试:

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

一个选项是否可以携带多个值,例如当用户选择"One"时,那么与该选项相关的一些其他值将被写入数据库.

我应该如何设计SELECT标签,以便每个选项可以携带一个以上的值,如下所示:

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

Answer 1

一种方法,首先是一个数组,第二个是一个对象:

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

编辑(回答3年后)将两个值都放入JSON格式(使用JSON.stringify()),因为我抱怨我的概念验证答案"可能会让新手开发者感到困惑".

Answer 2

我今天真的想知道这个,我通过使用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个值,它有一个分隔符(在本例中为"|")来分割值(在本例中为模型和颜色).

在操作页面上,我将结果爆炸成一个数组,然后调用每个数组.正如您所看到的,我已将它们分开并贴上标签,以便您可以看到它造成的影响.

我希望这可以帮助别人 :)

Answer 3

它可以在选择选项中有多个值,如下所示.

<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中找到更多详细信息

Answer 4

一个选项是使用逗号分隔多值

喜欢

value ="123,1234"

并在服务器端将它们分开

Answer 5

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

Answer 6

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>

Answer 7

在 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

Answer 8

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

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

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

...

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

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

...

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

Answer 9

为每个选项设置值，例如

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

上面的代码返回一个仅包含数字的数组，并且“：”被删除

Answer 10

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

超文本标记语言

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

});