Может ли параметр в теге Select содержать несколько значений?

У меня есть тег выбора с некоторыми параметрами в 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>

Отредактировано (через 3 года после ответа) для помещения обоих значений в формат JSON (с использованием JSON.stringify()) из-за жалобы на то, что мой контрольный ответ «может запутать новичка-разработчика».

Мне действительно было интересно это сегодня, и я добился этого с помощью функции 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 с двумя вариантами. Каждая опция имеет 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"

а на стороне сервера разделите их

Когда мне нужно это сделать, я делаю другие значения data-values, а затем использую 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атрибуте? Почему бы просто не отправить первичное значение в базу данных, а обо всем остальном позаботится реляционная природа базы данных.

Если вам нужно иметь несколько значений в OPTIONs, попробуйте использовать разделитель, который не очень распространен:

<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 ([разделитель], [опубликованное значение]);

$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 тогда будут просто содержать ключи, используемые для разыменования подмассивов.

Вот пример кода. Это написано на 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>';

Это может быть полезно, а может и не быть полезным для других, но для моего конкретного случая использования я просто хотел, чтобы дополнительные параметры передавались обратно из формы при выборе параметра - эти параметры имели одинаковые значения для всех параметров, поэтому ... мое решение было включить скрытые поля ввода в форму с помощью 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