web-dev-qa-db-fra.com

Une option dans une balise Select peut-elle porter plusieurs valeurs?

J'ai une balise select avec quelques options dans un formulaire HTML:
(les données seront collectées et traitées en PHP)

Essai:

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

Est-il possible pour une option de porter plusieurs valeurs, comme lorsqu'un utilisateur sélectionne "Un", quelques autres valeurs associées à cette option seront alors écrites dans la base de données.

Comment devrais-je concevoir la balise SELECT afin que chacune des options puisse porter une valeur comme celle-ci:

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

Une façon de le faire, d’abord un tableau, ensuite un objet:

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

Édité (3 ans après la réponse) de mettre les deux valeurs au format JSON (à l'aide de JSON.stringify()) en raison d'une plainte selon laquelle ma réponse de validation de principe "pourrait confondre un développeur débutant".

119
Robusto

En fait, je me demandais cela aujourd'hui, et je l'ai réalisé en utilisant la fonction php exploser, comme ceci:

Formulaire HTML (dans un fichier que j'ai nommé '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>

Action PHP (dans un fichier que j'ai nommé doublevalue_action.php)

    <?php
            $result = $_POST['car'];
            $result_explode = explode('|', $result);
            echo "Model: ". $result_explode[0]."<br />";
            echo "Colour: ". $result_explode[1]."<br />";
    ?>

Comme vous pouvez le voir dans le premier morceau de code, nous créons une zone de sélection HTML standard, avec 2 options. Chaque option a 1 valeur, qui a un séparateur (dans cet exemple, '|') pour diviser les valeurs (dans ce cas, modèle et couleur).

Sur la page d'action, je décompose les résultats dans un tableau, puis j'appelle chacun d'eux. Comme vous pouvez le voir, je les ai séparés et étiquetés pour que vous puissiez voir l'effet que cela provoque. 

J'espère que ça aidera quelqu'un :)

44
Nedra

une option est de mettre plusieurs valeurs avec des virgules séparées

comme 

value ="123,1234"

et séparez-les du côté serveur

15
Haim Evgi

il est possible d’avoir plusieurs valeurs dans une option de sélection, comme indiqué ci-dessous.

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

vous pouvez obtenir la valeur sélectionnée lors d'un événement change en utilisant jquery comme indiqué ci-dessous.

$("#ddlEmployee").change(function () {
     alert($(this).find(':selected').data('city'));
});

Vous pouvez trouver plus de détails dans ce LIEN

15
Vara

Quand j'ai besoin de faire cela, je crée les autres valeurs données-valeurs, puis j'utilise js pour les affecter à une entrée cachée.

<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>
11
chiliNUT

Si votre objectif est d'écrire ces informations dans la base de données, pourquoi avez-vous besoin d'une valeur primaire et de valeurs "liées" dans l'attribut value? Pourquoi ne pas simplement envoyer la valeur primaire à la base de données et laisser la nature relationnelle de la base de données s'occuper du reste.

Si vous avez besoin de plusieurs valeurs dans votre OPTIONs, essayez un délimiteur qui n’est pas très courant:

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

...

ou ajoutez un objet littéral (format JSON):

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

...

Cela dépend vraiment de ce que vous essayez de faire.

4
David Hoerster

mettre des valeurs pour chaque option comme 

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

côté serveur en cas de php, utilisez des fonctions comme exploser [tableau] = exploser ([delimeter], [valeur affichée]);

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

le code ci-dessus renvoie un tableau contenant uniquement les nombres et le ':' est supprimé

3
Jaison Justus

Je l'ai fait en utilisant des attributs de données. Est beaucoup plus propre que d'autres méthodes tentant d'exploser, etc.

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

});
2
Jack Nicholson

Utilisez un délimiteur pour séparer les valeurs.

<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
Chad C.

Au lieu de stocker les options côté client, vous pouvez également stocker les options en tant qu'éléments de sous-tableau d'un tableau associatif/indexé côté serveur. Les valeurs de la balise select ne contiendraient alors que les clés utilisées pour déréférencer le sous-tableau.

Voici un exemple de code. Ceci est écrit en PHP depuis l'OP mentionné PHP, mais il peut être adapté à n'importe quel langage côté serveur que vous utilisez:

<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
Kodos Johnson

Les paramètres de balises en double ne sont pas autorisés en HTML. Ce que vous pouvez faire, c'est VALUE="1,2010". Mais vous devrez analyser la valeur sur le serveur.

0
Witek