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

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>

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

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

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

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

comme

value ="123,1234"

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

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>

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.

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é

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

});

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>

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];
?>

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

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.

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

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.

vous pouvez utiliser plusieurs attributs

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