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

106

У меня есть тег выбора с некоторыми параметрами в 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>
user327712
источник
1
вы используете php в качестве серверного скрипта для обработки?
Джейсон Джастус,
1
просто любопытно зачем тебе это нужно?
Salil
2
@ Салил. Из любопытства, возможно ли это сделать
user327712
stackoverflow.com/questions/38180525/… Работайте для меня.
Кайо Андриан

Ответы:

154

Один из способов сделать это, сначала массив, второй объект:

    <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()) из-за жалобы на то, что мой контрольный ответ «может запутать новичка-разработчика».

Робусто
источник
9
+1 за элегантное решение. NB. Если вы используете второй вариант, я рекомендую вам использовать $ .parseJSON ($ (this) .val ()) в событии изменения, чтобы получить объект javascript, при условии, что вам нужно получить каждое значение отдельно.
Lucas B
1
-1, потому что этот ответ побуждает ОП иметь большую проблему безопасности в его коде при оценке ввода. Лучший способ избежать этого - использовать JSON, как предлагает @DavidHoerster, потому что ввод лучше ведет себя.
fotanus
5
@fotanus: Мой второй пример - это литерал объекта JSON, ничем не отличающийся от того, что предлагает другой вопрос. Что касается массива, то это просто пример. Код на стороне сервера в любом случае несет ответственность за очистку входных значений.
Робусто
1
@Robusto второй пример недействителен JSON. С другой стороны, это рубиновый хеш. Моя проблема с вашим ответом не в том, что вы объясняете или знаете (потому что я считаю, что вы знаете, как сделать это безопасным), а в том, что он упускает и может запутать новичка-разработчика (как это было с одним моим другом).
fotanus
11
Хорошее решение, но для преобразования строки в JSON имена свойств должны быть заключены в двойные кавычки, например: value = '{"foo": "bar", "one": "two"}'
Ларс-Ласс
52

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

На странице действия я превращаю результаты в массив, а затем вызываю каждый из них. Как видите, я разделил и пометил их, чтобы вы могли видеть эффект, который это вызывает.

Я надеюсь, что это поможет кому-то :)

Недра
источник
1
Я считаю этот метод очень простым и очень полезным, но мне интересно, поддерживается ли этот метод всеми браузерами?
Вайыл Карим 08
выглядит очень просто и эффективно. Спасибо
Варун Гарг
Блестящий, удивительный, превосходный .. жемчужина класса.
user3370889 03
3
@WaiylKarim Нет причин, по которым он не должен работать во всех браузерах. Браузеры не должны заботиться о том, что находится в значении .. И если у них есть проблемы с некоторыми символами в нем, нет проблем с выбором другого. Например, точка или # или _ или любой другой символ, который может использоваться в качестве разделителя на стороне сервера
Рисек
лучшее решение для меня
fizzi
25

возможно иметь несколько значений в опции выбора, как показано ниже.

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

Вы можете найти более подробную информацию по этой ССЫЛКЕ

Вара
источник
16

один из вариантов - указать несколько значений через запятую

лайк

value ="123,1234"

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

Хаим Евги
источник
как разделить их на стороне сервера? (на php)
Мухаммад Ашфак
как функция взрыва
Хаим Евги
13

Когда мне нужно это сделать, я делаю другие значения 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>
чили ОРЕХ
источник
1
Это помогло мне частично - также можно использовать .data (), чтобы вернуть их, если у вас уже есть элемент (вместо выполнения запроса селектора). например myElem.data ('othervalue')
jsh
2
Технически это не то, что спрашивает OP, но это на 100% то, что я пытался выполнить, когда пришел сюда искать. +1 за простой и лучший путь к тому, что, как я полагаю, было конечной целью простого хранения двух частей данных в опции выбора.
Lime
5

Если ваша цель - записать эту информацию в базу данных, тогда зачем вам иметь первичное значение и «связанные» значения в valueатрибуте? Почему бы просто не отправить первичное значение в базу данных, а обо всем остальном позаботится реляционная природа базы данных.

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

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

...

или добавьте литерал объекта (формат JSON):

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

...

Это действительно зависит от того, что вы пытаетесь сделать.

Дэвид Хёрстер
источник
4

введите значения для каждой опции, например

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

приведенный выше код возвращает массив, в котором удаляются только числа и ':'

Джейсон Юстус
источник
4

Я сделал это с помощью атрибутов данных. Намного чище, чем другие методы взрыва и т. Д.

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

});
разъем
источник
4

А как насчет атрибутов данных 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>

Анкит
источник
1
"data-" необходимо, чтобы это работало, а вторая часть должна быть в нижнем регистре.
Арун Прасад ES
1

Используйте разделитель для разделения значений.

<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];
?>
Чад К.
источник
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
кунал шактават
источник
0

В HTML не допускаются повторяющиеся параметры тега. Что вы могли сделать, так это VALUE="1,2010". Но вам нужно будет проанализировать значение на сервере.

Витек
источник
0

Вместо того, чтобы хранить параметры на стороне клиента, другой способ сделать это - сохранить параметры как элементы подмассива ассоциативного / индексированного массива на стороне сервера. Значения тега 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>';
Кодос Джонсон
источник
0

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

Может быть, очевидно ... более очевидно после того, как вы это увидите.

MangoCat
источник
-5

вы можете использовать несколько атрибутов

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

Алекс Кумбхани
источник
Ему нужно несколько битов информации из одного выбора, а не из нескольких выборок.
Barmar