Al pasar los campos de entrada ocultos en HTML Seleccione la opción

Question

¿Alguien sabe si es posible pasar un parámetro de petición oculta con un elemento <select> <option> en un formulario HTML?

Así, por ejemplo, si el usuario selecciona <option value="foo">foo</option> de una lista de opciones <select>, ¿podría alguna manera pasar un valor oculto en el, así como el valor "foo", y recuperar eso como un parámetro de la petición? P.ej. <input type="hidden" name="x" value="bar"/> me permitiría obtener los valores "foo" y "bar" de la solicitud cuando el usuario selecciona la opción de foo.

Gracias

Answer 1

Una lista de selección tiene tanto un valor que se muestra al usuario y un valor que se pasa de nuevo al servidor en forma posterior. Así que se podría utilizar algún tipo de delimitador en el valor publicado para obtener ambos valores enviados de vuelta y luego analizarlos en ese punto:

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

Pero mejor aún sería la de pasar de nuevo a un valor de ID que luego se podría utilizar para saber qué elemento seleccionado en una base de datos y también lo utilizan para buscar el segundo elemento relacionado:

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

Su base de datos podría tener este aspecto:

ID   DisplayValue   OtherData   
123  foo            bar     
124  foo2           bar2    

Answer 2

No es la type='hidden' entrada de forma que se podría actualizar utilizando el evento onchange del selecto menú desplegable, entonces sería publicado con el formulario. Sospecho que se desea crear una matriz de los valores posibles para el campo oculto en el mismo orden que sus equivalentes en el selecto menú desplegable y luego acceder al valor de la matriz por el índice de uso de la propiedad selectedIndex del elemento de selección.

Answer 3

Aquí hay una solución alternativa asumiendo jQuery está disponible. Si utiliza una biblioteca de utilidades que no sea js jQuery, o ninguna biblioteca en absoluto, esto es todavía posible. Es sólo una función de unión al selecto es onchange evento y analizar el JSON de una técnica de atributo personalizado.

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

^ de marcado ------- 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+'"/>');
  });
}

beneficio principal de esto es que debería, en teoría, permitirá publicar una 'cantidad variable de variables' de la forma. También podría ajustar el guión para dar cuenta de ciertos objetos anidados. Mientras se pasa en JSON válida para los datos de atributos de su elección.

Si alguien trata de esto antes de hacerlo, por favor hágamelo saber. Voy a probar esto más adelante, pero puede haber algunos menores errors.You debería ser capaz de utilizar esto en cualquier elemento de selección y tienen entradas ocultas rellenar automáticamente dentro de otro elemento; script también debe garantizar que éstos sean de la misma etiqueta de formulario para usted y tener nombres únicos, pero agrupados a través de HTTP matriz.