En passant les champs d'entrée cachés dans l'option HTML Select

Question

Est-ce que quelqu'un sait s'il est possible de passer un paramètre de requête caché avec un élément <select> de <option> dans un formulaire HTML?

Ainsi, par exemple, si l'utilisateur a sélectionné <option value="foo">foo</option> dans une liste d'options <select>, pourrais-je passer en quelque sorte une valeur cachée dans, ainsi que la valeur « foo », et récupérer que comme paramètre de demande? Par exemple. <input type="hidden" name="x" value="bar"/> me permettrait d'obtenir les valeurs « foo » et « bar » de la demande lorsque l'utilisateur a sélectionné l'option foo.

Merci

Answer 1

Une liste de sélection est à la fois une valeur qui est affichée à l'utilisateur et une valeur qui est transmise au serveur dans le poste de formulaire. Donc, vous pouvez utiliser une sorte de delimiter la valeur affichée pour obtenir les deux valeurs renvoyées, puis les analyser à ce moment:

        <select id="myselectlist" >
            <option value="foo|bar">foo</option>
            <option value="foo2|bar2">foo2</option>
        </select>

Mais mieux encore serait de passer de nouveau une valeur d'identité que vous pouvez ensuite utiliser pour savoir quel élément a été sélectionné à partir d'une base de données et utiliser également pour rechercher le deuxième élément connexe:

        <select id="myselectlist" >
            <option value="123">foo</option>
            <option value="124">foo2</option>
        </select>

Votre base de données pourrait ressembler à ceci:

ID   DisplayValue   OtherData   
123  foo            bar     
124  foo2           bar2    

Answer 2

Il est le type='hidden' d'entrée de formulaire que vous pouvez mettre à jour en utilisant l'événement onchange de la liste déroulante, sélectionnez ce serait alors affichée sous forme. Je suppose que vous voulez créer un tableau des valeurs possibles pour l'entrée cachée dans le même ordre que leurs équivalents dans la liste déroulante, sélectionnez puis accéder à la valeur du tableau par index en utilisant la propriété selectedIndex de l'élément de sélection.

Answer 3

Voici une solution de rechange en supposant jQuery est disponible. Si vous utilisez une bibliothèque utilitaire js autre que jQuery, ou aucune bibliothèque du tout, cela est encore possible. Il est juste une fonction de liaison à la sélection est onchange événement et l'analyse syntaxique du JSON à partir d'une commande de données attribut.

<form>
<select name="AnySelect">
 <option value="primary-value0" data-support='["test",128,2014,"blackberry"]' />
 <option value="primary-value1" data-support='["test1",39,2013,"apricot"]' />
 <option value="primary-value2" data-support='["test2",42,2012,"peach"]' />
 <option value="primary-value3" data-support='[null,null]' />
 <option value="primary-value4" data-support='[30,28,null]' />
</select>
.
.
.
<span style="visibility: hidden" id="Support_AnySelect-container"><span>
</form>

^ Markup ------- JavaScript v

//bind onchange once document is loaded and ready
$.ready(function(){ $('#TheSelector').on('change',UpdateHidden); });

function UpdateHidden(event)
{
  //Create a base name for grouping dynamic values; ex: Support_AnySelect
  Name='Support_'+SelectField.attr('name');

  //Check if container was made for us already
  Contain=$(this.parent).find('#'+Name+'-container');

  if(Container.length===0)  //make the container if missing
  {
    $(this).after('<span id="'+Name+'-container" style="visibility: none;"></span>');
    Contain=$(this.parent).children('#'+Name+'-container');
  }

  //get our special multi-values, jQuery will auto decode the JSON
  SupportValues = this.data('support');

  Contain.empty(); //get rid of last select options
  $.each(SupportValues,function(i,val)
  {
    Contain.append('<input type="hidden" name="'+Name+'['+i+'] value="'+val+'"/>');
  });
}

Le principal avantage de cela est qu'il devrait, en théorie, vous permettent de publier une « quantité variable de variables » de la forme. Vous pouvez également ajuster le script pour tenir compte de certains objets imbriqués. Tant que vous passez JSON valide les données attribut de votre choix.

Si quelqu'un essaie cela avant moi, s'il vous plaît laissez-moi savoir. Je vais tester cela plus tard, mais peut-être quelques mineurs errors.You devraient pouvoir l'utiliser sur tout élément de sélection et ont des entrées cachées remplir automatiquement dans un autre élément; script doit également garantir à ceux-ci soient dans la même balise de formulaire pour vous et ayant des noms uniques mais regroupés par tableau HTTP.