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

104

J'ai une balise select avec quelques options sous forme 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 transporter plusieurs valeurs comme lorsqu'un utilisateur sélectionne "Un", alors quelques autres valeurs liées à cette option seront écrites dans la base de données.

Comment dois-je concevoir la selectbalise pour que chacune des options puisse porter une à 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>
user327712
la source
1
utilisez-vous php comme script serveur pour le traitement
Jaison Justus
1
juste curieux de savoir pourquoi vous en avez besoin?
Salil le
2
@Salil. Par curiosité s'il est possible de le faire
user327712
stackoverflow.com/questions/38180525/... Travaillez pour moi.
Caio Andrian

Réponses:

153

Une façon de faire cela, d'abord un tableau, puis 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>

Modifié (3 ans après avoir répondu) pour mettre les deux valeurs au format JSON (en utilisant JSON.stringify()) en raison d'une plainte selon laquelle ma réponse de preuve de concept «pourrait confondre un développeur débutant».

Robusto
la source
9
+1 pour une solution élégante. NB Si vous utilisez l'option deux, je vous recommande d'utiliser $ .parseJSON ($ (this) .val ()) dans l'événement de modification pour obtenir un objet javascript, en supposant que vous deviez obtenir chaque valeur séparément.
Lucas B
1
-1 car cette réponse induit l'OP à avoir un gros problème de sécurité dans son code lors de l'évaluation de l'entrée. La meilleure façon d'éviter cela est d'utiliser JSON, comme suggéré par @DavidHoerster, car l'entrée se comporte mieux.
fotanus
5
@fotanus: Mon deuxième exemple est un objet JSON littéral non différent de ce que propose l'autre question. Quant au tableau, ce n'est qu'un exemple. Il est de la responsabilité du code côté serveur de nettoyer de toute façon les valeurs d'entrée.
Robusto
1
@Robusto, le deuxième exemple n'est pas un JSON valide. C'est, d'autre part, un hasch rubis. Mon problème avec votre réponse ne concerne pas ce que vous expliquez ou savez (car je pense que vous savez comment le sécuriser), mais ce que cela omet et pourrait confondre un développeur débutant (comme il l'a fait avec un de mes amis).
fotanus
11
Bonne solution, mais pour que la chaîne soit analysée en JSON, les noms de propriété doivent avoir des guillemets doubles, comme ceci: value = '{"foo": "bar", "one": "two"}'
Lars-Lasse
52

Je me posais la question aujourd'hui, et je l'ai réalisé en utilisant la fonction d'explosion de php, 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 boîte de sélection HTML standard, avec 2 options. Chaque option a 1 valeur, qui a un séparateur (dans ce cas, «|») pour diviser les valeurs (dans ce cas, le modèle et la couleur).

Sur la page d'action, j'explose 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 :)

Nedra
la source
1
Je trouve cette méthode très simple et très utile, mais je me demande si cette méthode est prise en charge par tous les navigateurs?
Waiyl Karim
semble très simple et efficace. Merci
Varun Garg
Brillant, incroyable, superbe ... bijou d'une classe.
user3370889
3
@WaiylKarim Aucune raison pour laquelle cela ne devrait pas fonctionner avec tous les navigateurs. Les navigateurs ne devraient pas se soucier de ce que contient la valeur. Et s'ils ont des problèmes avec certains symboles, il n'y a aucun problème à en choisir un autre. Comme le point ou # ou _ ou tout autre caractère pouvant être utilisé comme délimiteur côté serveur
Risinek
meilleure solution pour moi
fizzi il y a
25

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 de l'événement de changement 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

Vara
la source
16

une option consiste à mettre plusieurs valeurs séparées par une virgule

comme

value ="123,1234"

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

Haim Evgi
la source
comment les séparer côté serveur? (en php)
Muhammad Ashfaq
comme la fonction d'explosion
Haim Evgi
12

Lorsque j'ai besoin de faire cela, je crée les autres valeurs data-values, puis j'utilise js pour les affecter à une entrée masqué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>
chiliNUT
la source
1
Cela m'a fait une partie du chemin - aussi, je peux utiliser .data () pour les récupérer si vous avez déjà un élément (vs faire une requête de sélection). par exemple myElem.data ('othervalue')
jsh
2
Ce n'est pas techniquement ce que demande OP, mais c'est à 100% ce que j'essayais d'accomplir lorsque je suis venu chercher ici. +1 pour le chemin simple et meilleur vers ce que je suppose être l'objectif final de simplement stocker deux éléments de données dans une option de sélection.
Lime
5

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

Si vous avez besoin d'avoir 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.

David Hoerster
la source
4

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 explode [array] = explode ([delimeter], [posted value]);

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

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

Jaison Justus
la source
4

J'ai fait cela en utilisant des attributs de données. Est beaucoup plus propre que les autres méthodes qui tentent 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);

});
Jack
la source
4

Qu'en est-il des attributs de données html? C'est le moyen le plus simple. Référence de w3school

Dans ton cas

$('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>

Ankit
la source
1
"data-" est nécessaire pour que cela fonctionne, et la deuxième partie doit être en minuscules.
Arun Prasad ES le
1

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];
?>
Tchad C.
la source
1

En HTML

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

Pour JS

  var valueOne= $('#Testing').val().split(',')[0];
  var valueTwo =$('#Testing').val().split(',')[1];
  console.log(valueOne); //output 1
  console.log(valueTwo); //output 2010

OU POUR PHP

  $selectedValue= explode(',', $value);
  $valueOne= $exploded_value[0]; //output 1
  $valueTwo= $exploded_value[1]; //output 2010
kunal shaktawat
la source
0

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

Witek
la source
0

Au lieu de stocker les options côté client, une autre façon de procéder consiste à 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 contiendraient alors simplement les clés utilisées pour déréférencer le sous-tableau.

Voici un exemple de code. Ceci est écrit en PHP depuis que l'OP a 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>';
Kodos Johnson
la source
0

Cela peut ou non être utile pour les autres, mais pour mon cas d'utilisation particulier, je voulais juste que des paramètres supplémentaires soient renvoyés du formulaire lorsque l'option a été sélectionnée - ces paramètres avaient les mêmes valeurs pour toutes les options, donc ... ma solution était d'inclure des entrées cachées dans le formulaire avec la sélection, comme:

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

Peut-être évident ... plus évident après l'avoir vu.

MangoCat
la source
-5

vous pouvez utiliser plusieurs attributs

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

Alex Kumbhani
la source
Il veut plusieurs bits d'information à partir d'une sélection, pas plusieurs sélections.
Barmar