Pasar campos de entrada ocultos en HTML Seleccionar la opción

Question

¿Alguien sabe si es posible pasar un parámetro de solicitud oculto con un elemento <select><option> en un formulario HTML?

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

Gracias

Answer 1

Una lista de selección tiene tanto un valor que se muestra al usuario como un valor que se devuelve al servidor en la publicación del formulario. 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 puede 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 entrada de un formulario type='hidden' que se podría actualizar utilizando el evento onchange del selecto menú desplegable, entonces sería publicado con el formulario. Sospecho que querrá crear una matriz de los valores posibles para la entrada oculta en el mismo orden que sus equivalentes en el menú desplegable de selección y luego acceder al valor en la matriz por índice usando la propiedad selectedIndex del elemento de selección.

Answer 3

He aquí un solu alternativa suponiendo que jQuery está disponible. Si usa una biblioteca de utilidades js distinta de jQuery, o ninguna biblioteca, esto aún es posible. Simplemente vincula una función al evento onchange de selección y analiza el json desde un atributo de datos 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> 

^ 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 puede ajustar la secuencia de comandos para dar cuenta de ciertos objetos anidados. Siempre que pase JSON válido al atributo de datos de su elección.

Si alguien lo prueba antes que yo, por favor, hágamelo saber. Lo probaré más adelante, pero es posible que tenga algunos errores menores. Debería poder usar esto en cualquier elemento de selección y las entradas ocultas se pueblan automáticamente dentro de otro elemento; script también debe garantizar que estos estén en la misma etiqueta de formulario para usted y que tengan nombres únicos pero agrupados a través de una matriz HTTP.