Может ли Option в теге Select содержать несколько значений? - PullRequest
92 голосов
/ 14 июля 2010

Я получил тег 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>

Ответы [ 12 ]

125 голосов
/ 14 июля 2010

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

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

46 голосов
/ 26 апреля 2013

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

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

Надеюсь, это кому-нибудь поможет:)

18 голосов
/ 12 февраля 2017

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

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

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

15 голосов
/ 14 июля 2010

один из вариантов - ввод нескольких значений с разделителями-запятыми

как

value ="123,1234"

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

12 голосов
/ 18 июня 2015

Когда мне нужно сделать это, я делаю другие значения-значения и затем использую 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>
5 голосов
/ 14 июля 2010

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

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

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

...

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

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

...

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

3 голосов
/ 04 января 2018

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

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

});
3 голосов
/ 14 июля 2010

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

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

$values = explode(':',$_POST['val']

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

1 голос
/ 08 мая 2018

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

<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];
?>
0 голосов
/ 09 марта 2018

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